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
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.
@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);
});
As I've posted in a similar question, I've had good success with creating a dummy non-fixed nav bar right before my real fixed nav bar.
<nav class="navbar navbar-default"></nav> <!-- Dummy nav bar -->
<nav class="navbar navbar-default navbar-fixed-top"> <!-- Real nav bar -->
<!-- Nav bar details -->
</nav>
The spacing works out great on all screen sizes.
Further to Nick Bisby's answer, if you get this problem using HAML in rails and you have applied Roberto Barros' fix here:
I replaced the require in the "bootstrap_and_overrides.css" to:
=require twitter-bootstrap-static/bootstrap.css.erb
(See https://github.com/seyhunak/twitter-bootstrap-rails/issues/91)
... you need to put the body CSS before the require statement as follows:
@import "twitter/bootstrap/bootstrap";
body { padding-top: 40px; }
@import "twitter/bootstrap/responsive";
=require twitter-bootstrap-static/bootstrap.css.erb
If the require statement is before the body CSS, it will not take effect.
The problem is with navbar-fixed-top, which will overlay your content unless specify body-padding. No solution provided here works in 100% cases. The JQuery solution blink/shift the page after the page is loaded, which looks weird.
The real solution for me is not to use navbar-fixed-top, but navbar-static-top.
.navbar { margin-bottom:0px;} //for jumtron support, see http://stackoverflow.com/questions/23911242/gap-between-navbar-and-jumbotron
<nav class="navbar navbar-inverse navbar-static-top">
...
</nav>
All you have to do is
@media (min-width: 980px) { body { padding-top: 40px; } }