bootstrap menu top affix

Question

I\'m trying to do a bootstrap menu with an image and under the menu links, that when it\'s scrolled the menu sticks on the top of the window.

I\'ve found interesting

Answer 1

You need to apply the z-index to the #nav not the .nav-wrapper:

#nav { 
  position: relative;
  z-index: 2; 
}

Demo: http://jsfiddle.net/t7pL3/

Answer 2

Another variation for you: http://jsfiddle.net/panchroma/6P5sF/

The behaviour here is slightly different than before. The navbar scrolls with the page before it is affixed, and when the collapsed menu is opened it pushes down the page content.

I removed your javascript and called everything using data attributes by adding the following to your nav-wrapper div:

<div id="nav-wrapper" data-spy="affix" data-offset-top="100">  

data-offset-top is the distance you need to scroll before the menu is affixed.

I also made one small change to your CSS:

#nav-wrapper.affix {
  top: 0;
  width: 100%
}

Hope this helps!

Answer 3

It seems this can be achieved by replacing the CSS you provided by

#nav {
    width: 100%;
    position:fixed;
}

#nav.affix {
    top: 0;
}

#nav > .navbar-inner {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0;
}

The main difference is that here, #nav covers both the cases #nav.affix and #nav.affix-top

See this jsfiddle.

edit: The problem turns out to occur when #nav's position is inherited. If you fix it, as I suggested, or if you set it to relative, as the other post suggested, your problem will be solved.