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 bootstrap affix and have used what's in this thread: bootstrap-affix : Div underneath affix "jumps" to top. How do I make it smoothly scroll behind?

The problem is that when I press the menu's button the options are under the content text of the page.

I've written a fiddle for you to see my problem and try a solution: http://jsfiddle.net/mram888/WnPqF/

I've tried to put different z-index for the class of my menu divs, but only works properly when the page is scrolled and the menu is affixed on the top.

#nav.affix {
    position: fixed;
    top: 0;
    width: 100%;
    z-index:2;
}

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

.nav-wrapper {
    z-index: 2;
}

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/