Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Peter Mayer
Peter Mayer
3,034 Points

Twitter Bootstrap Navbar fixed to top

Hey guys, I'm busy building a website with twitter bootstrap. I'm using fixed to top navigation. Therefore I need to change padding in a way which I don't really get. Here the ressource site: http://twitter.github.io/bootstrap/components.html#navbar They say: Fixed to top 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.

I understand that I need to change the padding, but I don't understand where (which file, and where in the file) Anybody has a hint?

4 Answers

Philipp Antar
Philipp Antar
7,216 Points

Assuming your layout looks like this:

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <ul class="nav">
      <li class="active"><a href="#">Home</a></li>
    </ul>
  </div>
</div>
<div class="content">
</div>

That is, the navbar precedes the rest of the page's content (the div with the class "content"). Then you'll have to add a margin to the content-div. The reason is that the navbar with the class "navbar-fixed-top" adds the CSS property position: fixed. This property removes the navbar from the normal flow of the document. The top of the the content div would thus be hidden underneath the navbar. HTH :)

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Peter Mayer - You might want to check out [learnlayout.com](http;//learnlayout.com) as it's the best resource I've seen on CSS positioning.

Hylan Alexander
Hylan Alexander
4,434 Points
Hylan Alexander
Hylan Alexander
4,434 Points

If you're linking to a custom external file that is linked after the Bootstrap CSS but before the Responsive CSS then you could add padding anywhere in your custom CSS file that will offset the page or content below the navbar.

The Responsive CSS file should have "responsive" in the file's name. If your markup doesn't have this file linked then you don't have the responsive feature of Bootstrap enabled.

Peter Mayer
Peter Mayer
3,034 Points
Peter Mayer
Peter Mayer
3,034 Points

cool thanks a lot. that worked