Navbar-fixed-top pushes content on page up

0
votes

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?

1
twitter-bootstrapstatictwitter-bootstrap-3fixednavbar

1 Answers

2
votes

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