Bootstrap Affix Nav Causes Div Below To Jump Up

Question

I\'ve created a JSFiddle using Bootstrap\'s affix function to make a nav stay at the top of the screen once you scroll down and the header moves out of view.

The problem

Answer 1

This seems to work:

.nav-wrapper
{
    min-height:50px;
}

Updated jsFiddle: http://jsfiddle.net/yYE62/5/

What's happening is that the affix plugin makes the element with the .affix class have a fixed position in the document. This removes the affixed element from the flow (or layout, if you prefer) and causes the container to collapse. When that happens, the content below slides up to fill the space that the affixed element used to occupy.

By adding the rule above, you tell that container to maintain a minimum height regardless of whether it has content or not. It doesn't have to be 50px; that's the default height of .navbar, so adjust to match your needs. If you don't want all .nav-wrappers to have a minimum height, assign an id and use that instead.

Answer 2

You need an extra wrapper for that to work flawlessly. Give it a minimum-height exactly same as the one you're affix`in :)