Why is main content moving over to navbar using Affix?

Question

Can't seem to figure out how to use Bootstrap Affix feature.

http://jsfiddle.net/GUbgF/1/

As soon as Affix adds the .affix class to the navbar, the main content block moves over, thus overlaying the navbar.

HTML

<class="row-fluid">
    <div class="span4 bs-docs-sidebar" id="side-bar" data-spy="affix" data-offset-top="100">
        <ul class="nav nav-list bs-docs-sidenav">
            <li><a href="#1"><i class="icon-chevron-right"></i>  1</a></li>
            <li><a href="#2"><i class="icon-chevron-right"></i>  2</a></li>
            <li><a href="#3"><i class="icon-chevron-right"></i>  3</a></li>
            <li><a href="#4"><i class="icon-chevron-right"></i>  4</a></li>
            <li><a href="#5"><i class="icon-chevron-right"></i>  5</a></li>
        </ul>
    </div>
   <div class="span8" id="main-bar>
    ...
   </div>
</div>

CSS

.affix {
position: fixed; 
top: 20px; 
left: 0px;

}

Answer 1

Here's an excerpt from the Bootstrap docs..

Heads up! You must manage the position of a pinned element and the behavior of its immediate parent. Position is controlled by affix, affix-top, and affix-bottom. Remember to check for a potentially collapsed parent when the affix kicks in as it's removing content from the normal flow of the page.

So in your case once the .affix kicks on the span4 that contains your sidebar is removed from the usual flow of the DOM.

One way to fix this is to make the `UL the affix element..

<ul class="nav nav-list"  data-spy="affix" data-offset-top="100">  

http://jsfiddle.net/skelly/GUbgF/2/

You may also have to use a @media query to handle the case when the browser is resized to a smaller width.

Answer 2

You are giving data-spy="affix" data-offset-top="100" to the span4, you should give it to the ul.nav instead.

When you give the affix class to span4, it makes position relative to the viewport. Hence the span8 or #main-bar doesn't count the span4 as its sibling, when position is fixed for span4 and it results in behind the nav.

You can inspect the sidebar here and see how it is implemented.

See updated fiddle

Answer 3

If I may contribute to such an old post.

I have recently encountered a similar problem. I devided my main copy area into:

col-sm-10 and col-sm-2

Suddenly the div containing my copy and images would scroll behind the affix topnav but the copy and the images themselves would scroll above the affix navbar.

Using the above fix distorted my layout but after some more research I discovered z-index.

So all I did was add a class to the holding container of my affix-top navbar, and then applied a high z-index to it.

.topNavContainer {
    z-index:99999;
}

z-index will determine which div will be at the front should 2 or more divs overlay each other. the higher the z-index, the more priority it will be given when overlapping another div.