0

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?

KyleMit
  • 30,350
  • 66
  • 462
  • 664
michael
  • 167
  • 5
  • 23

1 Answers1

2

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

DavidG
  • 113,891
  • 12
  • 217
  • 223
  • 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? – michael Jul 08 '14 at 18:45
  • OK, I've added a little more explaination. Hope that helps. – DavidG Jul 08 '14 at 19:06
  • For some reason, adding body { padding-top: 76px; } @media screen and (max-width: 768px) { body { padding-top: 0px; } } instead solved my problem. Weird. – michael Jul 08 '14 at 19:09
  • That's basically the same thing but removing it for smaller screen sizes. Don't forget to upvote/accept answers! – DavidG Jul 08 '14 at 19:13
  • 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. – michael Jul 08 '14 at 19:14
  • **Note**: this will break all your anchor tags on the page. [Here's a demo in bootply](http://www.bootply.com/xY40EhFmH0) - make the window small and click the `jump to my section` link. It will hide behind the fixed position menu – KyleMit Jul 08 '14 at 20:18