title: bootstrap menu top affix
body: <p>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.</p>
  
  <p>I've found interesting bootstrap affix and have used what's in this thread:
  <a href="https://stackoverflow.com/questions/13540969/bootstrap-affix-div-underneath-affix-jumps-to-top-how-do-i-make-it-smoothly">bootstrap-affix : Div underneath affix &quot;jumps&quot; to top. How do I make it smoothly scroll behind?</a></p>
  
  <p>The problem is that when I press the menu's button the options are under the content text of the page.</p>
  
  <p>I've written a fiddle for you to see my problem and try a solution:
  <a href="http://jsfiddle.net/mram888/WnPqF/" rel="nofollow noreferrer">http://jsfiddle.net/mram888/WnPqF/</a></p>
  
  <p>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.</p>
  
  <pre><code>#nav.affix {
      position: fixed;
      top: 0;
      width: 100%;
      z-index:2;
  }
  
  #nav &gt; .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;
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/SYbUb.jpg" alt="enter image description here">
  <img src="https://i.stack.imgur.com/o9HXF.jpg" alt="enter image description here">
  <img src="https://i.stack.imgur.com/EeI6i.jpg" alt="enter image description here"></p>