3

I'm trying to modify a bootstrap template to add a full length 1200 px banner at the top, instead of the smaller 120 x 60 images/logo-company.png logo that is there on the original site.

I have tried to no avail, but I would like to be able to seat this larger banner perfectly for desktop view, while having it be responsive on mobile devices.

I assume the original logo was so small that it didn't needto have code call outs to make it responsive.

Would anyone be kind enough to take a look and see if they can supply the necessary HTML and or CSS code to achieve this for me please.

original site. http://jituchauhan.com/industrial/boxed-layout/industrial-darker/index.html

kabr8
  • 341
  • 1
  • 2
  • 19
DA-G-GURU
  • 141
  • 1
  • 3
  • 12
  • Have you tried applying the img-responsive class to the banner image? – Enijar Dec 09 '16 at 16:32
  • 1
    Just give the header-row a background image – Benneb10 Dec 09 '16 at 16:36
  • In your demo you can't to simply comment in a part of bootstrap grid. The changes are a little more complex. – Banzay Dec 09 '16 at 19:41
  • @Banzay well I am close but in need of some final help please. Per my demo, I wanted the banner to be click through back to home page, so I went with the HTML edit with img-responsive and changed the DIV...I have no css for the new div either........The banner for some reason to me looks like it is being blocked from laying on top of the yellow parts, as the main-holder is 1200 and the banner is 1200...but something is off in another area I assume........I don't care of the method used to achieve my desire, I just want to achieve it.....would it be possible? and to post code to achieve?? THX – DA-G-GURU Dec 09 '16 at 21:05
  • What do you plan about contacts and social links in the head for desktop view? do you plan to hide them? – Banzay Dec 10 '16 at 19:56

2 Answers2

2

You can set background image for header and remove/hide the logo image.

#header-row {
  background-image: url(../images/logo-company.png);
}
max
  • 8,632
  • 3
  • 21
  • 55
2

If background image isn't working for you here is a simple solution:

<div class="header-row" id="header-row" style="padding: 0px; overflow:hidden; height:100px;">
        <!-- container-fluid is the same as container but spans a wider viewport, 
    it still has padding though so you need to remove this either by adding 
    another class with no padding or inline as I did below -->
   <div class="container-fluid" style="padding: 0px;">
      <div class="row"> 
        <!-- You originally has it set up for two columns, remove the second 
    column as it is unneeded and set the first to always span all 12 columns 
    even when at its smallest (xs). Set the overflow to hidden so no matter 
    the height of your image it will never show outside this div-->
         <div class="col-xs-12"> 
            <a class="navbar-brand logo" href="index.html">
        <!-- place your image here -->
               <img src="http://placekitten.com/g/1200/600" alt="company logo" style="width: 100%;">
            </a> 
         </div>     
      </div>
   </div>
</div>
Benneb10
  • 1,419
  • 1
  • 8
  • 13
  • Please look at the site as i added your code, we are close but still something off. I know there is some padding issues where you see yellow, not sure about the height issue on banner though. – DA-G-GURU Dec 12 '16 at 17:41
  • That padding is coming from the style.css header-row. Remove this inline or in the style sheet if its something you added added yourself. Set the height on this class also and remove the overflow:hidden from the col-xs-12 and add it to this class (still header-row) -- see edit – Benneb10 Dec 12 '16 at 18:16
  • can you please take a look at the link now? I added some markup to your code for the navbar-brand logo (float properties), and took out some in the header-row inline element you had...... and that has seem to do it i feel.....let me know if this is correct coding and is responsive etc if you can please. No rush – DA-G-GURU Dec 12 '16 at 19:47
  • @DA-G-GURU Unfortunately such edit would not conform to the established SO expectations and did not make it past the review phase. But for the purpose of the discussion that was intended it's archived here: http://stackoverflow.com/review/suggested-edits/14574396 When you agree on the solution it's generally better to simply replace the code in the answer instead of appending another version, if you explain that well in the edit message it will surely pass. Happy Stack Overflowing! :-) – The Vee Dec 12 '16 at 23:25
  • @benneb10 Thanks to all but your answer benneb10 is the one that i went with....i tried to give credit, but it that didnt work tell me how to do it and its done!..Thx – DA-G-GURU Dec 14 '16 at 16:40