Header and Navigation Positioning

Hi Guys,

I am using twitter bootstrap and want to have the Header with “ontargett design” grey background touching the top of the window and stretching the width of the browser. I have tried a few was but have affected the rest of the page.

Could someone help me please, website is http://www.neverup-neverin.com and I want it to look like this:

Hope this makes sense, thanks for reading

On .jumbotron you have padding set which is causing that space. Go into bootstrap.css and CTRL+F .jumbotron. Find the two rules that call for padding and set them to 0.

Hi,

Rather than changing bootstrap rules (which you should never really do with frameworks) you should to add a new class to the jumbotron div and use that to modify the padding.

e.g.div class="jumbotron jtron">

.jtron{padding:0 0 30px;}

You would then need to reduce the margin on .row:

.jtron .row{margin:0}

However you need to be very careful as I see that you have already over-written .container which is a bootstrap structural class and should not be altered as it affects other elements that rely on it. As a rule of thumb “never change any bootstrap rules” but rather over-ride them on an individual basis where you need them modified.

Follow the exact procedure for containers, rows and columns from the bootstrap docs as they are built to work together. (for example .row had negative side margins of 15px so if you don’t have it in the right structure the element will stick out of its container. )

1 Like