Why do I have to add padding to <body> when using a fixed-position top navbar in Bootstrap?
Solution 1
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.
Solution 2
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.
Solution 3
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.
http://twitter.github.com/bootstrap/components.html
Related videos on Youtube
immutabl
Out-of-work actor writing code to make ends meet. C# Javascript ASP.Net MVC VRML T-SQL HyperScript Sinclair BASIC
Updated on June 04, 2022Comments
-
immutabl over 1 year
I'm using the latest version of Bootstrap to style a site and I have come across what seems like a bug. You can view it here as a JSFiddle.
If I add a standard fixed-position top navbar and then some content after it, the subsequent content gets pulled up by about 60px so it ends up under the top navbar. So I looked at the Bootstrap examples pages and found a bit of inline CSS (in the head section) that is evidently being used to correct this:
body { padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */ }
This surprised me a great deal and I'm wondering if this is the result of an overlooked-bug in Bootstrap or if I should be doing this as a matter of course.
If the latter is the case, I'd be very interested to know why I should use inline CSS when Bootstrap is supposed to be a ready-to-go CSS solution.
And if the former, I'd very much like to know why this is as it is - why doesn't the Bootstrap CSS just add the padding to the bottom of the navbar or something?
-
immutabl about 11 yearsSo why didn't they just add bottom padding to the nav bar?
-
Quentin Pradet about 11 yearsYou don't want a bottom padding to the nav bar, but a padding on the body, if a navbar exists.
-
Joe Dargie about 11 years@5arx: when an element is given
position:fixed
in CSS, it stops taking up space in the document flow (it sort of sits on top of the other document content instead). This causes the effect you’re describing when you say “the subsequent content gets pulled up by about 60px so it ends up under the top navbar”. Adding bottom padding to the navbar wouldn’t change this, because the navbar doesn’t affect the document flow when it hasposition:fixed
. -
immutabl about 11 yearsOk. This seems like a very hacky way of doing things - aren't inline styles evil ...?
-
albertedevigo about 11 yearsWho said inline?
Add this after the core Bootstrap CSS and before the optional responsive CSS
so it should be added in a separate file or a <style> tag. -
immutabl about 11 yearsSorry I meant
inline
as in inline '<style>' tags. I try and keep all my CSS in external files - the inclusion of css in the HEAD tag on the Example page troubles me. -
Joe Dargie about 11 years@5arx: I suspect the example used
<style>
tags to make it easier to see what CSS they were adding. If the style is meant to apply to every page on the site, then yup, you’d be better off adding it to an external stylesheet. -
immutabl about 11 years@PaulD.Waite OK many thanks. I guess I should add it to bootstrap.css and pray that I remember to update any subsequent versions of Bootstrap I get. I still don't see why it wasn't included though.
-
albertedevigo about 11 yearsYou don't need to touch, bootstrap.css, I'll edit to show how
-
Joe Dargie about 11 years@5arx: “I still don't see why it wasn't included though.” Do you mean you expect bootstrap.css to include
body {padding-top:60px;}
? I don‘t know Bootstrap, but I assume using a fixed-position navbar is optional. If you don’t use the fixed-position navbar, you wouldn’t want an extra 60 pixels of top padding on your body element.