Advertisement
Advertisement


twitter bootstrap navbar fixed top overlapping site


Question

I am using bootstrap on my site and am having issues with the navbar fixed top. When I am just using the regular navbar, everything is fine. However, when i try to switch it to navbar fixed top, all the other content on the site shifts up like the navbar isn't there and the navbar overlaps it. here's basically how i laid it out:

.navbar.navbar-fixed-top
  .navbar-inner
    .container
.container
  .row
    //yield content

i tried to copy bootstraps examples exactly but still having this issue only when using navbar fixed top. what am I doing wrong?

2019/11/26
1
352
11/26/2019 4:25:14 AM

Accepted Answer

Your answer is right in the docs:

Body padding required

The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.

body { padding-top: 70px; }

Make sure to include this after the core Bootstrap CSS.

and in the Bootstrap 4 docs...

Fixed navbars use position: fixed, meaning they’re pulled from the normal flow of the DOM and may require custom CSS (e.g., padding-top on the ) to prevent overlap with other elements.

2020/06/20
532
6/20/2020 9:12:55 AM

As others have stated adding a padding-top to body works great. But when you make the screen narrower (to cell phone widths) there is a gap between the navbar and the body. Also, a crowded navbar can wrap to a multi-line bar, overwriting some of the content again.

This solved these kinds of issues for me

body { padding-top: 40px; }
@media screen and (max-width: 768px) {
    body { padding-top: 0px; }
}

This makes a 40px padding by default and 0px when under 768px width (which according to bootstrap's docs is the cell phone layout cutoff where the gap would be created)

2012/10/24

a much more handy solution for your reference, it works perfect in all of my projects:

change your first line from

.navbar.navbar-fixed-top

to

.navbar.navbar-default.navbar-static-top
2015/06/18

@Ryan, you are right, hard-coding the height will make it work bad in case of custom navbars. This is the code I am using for BS 3.0.0 happily:

$(window).resize(function () { 
   $('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);
});

$(window).load(function () { 
   $('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);         
}); 
2013/10/17

This issue is known and there's a workaround in the twitter bootstrap site:

When you affix the navbar, remember to account for the hidden area underneath. Add 40px or more of padding to the <body>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.

This worked for me:

body { padding-top: 40px; }
2012/10/14

I put this before the yield container:

<div id="fix-for-navbar-fixed-top-spacing" style="height: 42px;">&nbsp;</div>

I like this approach because it documents the hack needed to get it work, plus it also works for the mobile nav.

EDIT - this works much better:

@media (min-width: 980px) {
  body {
    padding-top: 60px;
    padding-bottom: 42px;
  }
}
2012/12/22