Navbar-fixed-top pushes content on page up

Question

I currently have a navbar at the top of my page that is static, but when I try to make it fixed, it always "eats" the content below it.

Bootply when it's static
Bootply when it's fixed

Is there any way to fix this?

Foredeck

Answer 1

When you add the navbar-fixed-top class to your nav bar, it applies two main CSS properties:

position: fixed;
top: 0;

This fixes the div to the top of the page. Doing that however means the following div starts exactly where the nav bar previously was. Think like this, the nav bar is now floating around so everything else is unaware of it's existence. So you need to push the rest of your page down slightly to compensate.

Just put a margin-top on the body content to push it down.

margin-top: 60px; 

In full, I added this to the CSS:

.body-content {
  margin-top: 60px;
}

Then added the body-content class to the next container.

Works like this: http://www.bootply.com/QlRuLAUtwN

Cuff

Weird, it works perfectly for that code, but not so much for what I have. Could you provide an explanation as to why it does this in the first place, i.e., is there some other CSS code that could interfere with what you suggested adding and cause there to still be issues? – Foredeck

OK, I've added a little more explaination. Hope that helps. – Cuff

For some reason, adding body { padding-top: 76px; } @media screen and (max-width: 768px) { body { padding-top: 0px; } } instead solved my problem. Weird. – Foredeck

That's basically the same thing but removing it for smaller screen sizes. Don't forget to upvote/accept answers! – Cuff

Thanks for the explanation. Yeah, body { padding-top: 76px; } @media screen and (max-width: 768px) { body { padding-top: 71px; } } seemed to work better for me, but at least I understand it now xD. Thx again. – Foredeck

Note: this will break all your anchor tags on the page. Here's a demo in bootply - make the window small and click the jump to my section link. It will hide behind the fixed position menu – Neona