Why do I have to add padding to <body> when using a fixed-position top navbar in Bootstrap?
From the documentation:
Add .navbar-fixed-top and remember to account for the hidden area underneath it by adding at least 40px padding to the
<body>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.
The .navbar-fixed-top is position: fixed, so a padding will not affect any other element.
EDIT
The "between the two .css" advice helps to prevent an issue with mobile devices. As position: fixed is broken on many devices, navbar goes static and the <body> padding creates a blank wrap on the top. So bootstrap-responsive.css overwrites this padding for that viewports.
You can reproduce that behaviour simply by adding a media query to the rule:
@media (min-width: 979px) {
body {
padding-top: 60px;
}
}
Include this rule on your custom stylesheet and forget <style> tags.
If you don't add a navigation bar, the padding is not needed. Bootstrap itself cannot know whether this is the case or not, so you need to put this small CSS bit yourself.
From the documentation:
Add
.navbar-fixed-topand remember to account for the hidden area underneath it by adding at least 40px padding to the<body>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.
http://twitter.github.com/bootstrap/components.html