Why do I have to add padding to <body> when using a fixed-position top navbar in Bootstrap?

13,461

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

Share:
13,461

Related videos on Youtube

immutabl
Author by

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, 2022

Comments

  • immutabl
    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
    immutabl about 11 years
    So why didn't they just add bottom padding to the nav bar?
  • Quentin Pradet
    Quentin Pradet about 11 years
    You don't want a bottom padding to the nav bar, but a padding on the body, if a navbar exists.
  • Joe Dargie
    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 has position:fixed.
  • immutabl
    immutabl about 11 years
    Ok. This seems like a very hacky way of doing things - aren't inline styles evil ...?
  • albertedevigo
    albertedevigo about 11 years
    Who 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
    immutabl about 11 years
    Sorry 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
    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
    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
    albertedevigo about 11 years
    You don't need to touch, bootstrap.css, I'll edit to show how
  • Joe Dargie
    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.