Fixed bootstrap navbar and bootstro

Question

I am using Bootstrap + Bootstro but cannot force the top navigation bar to obscure.

http://jsfiddle.net/NJsYw/5/ (click "Tutorial")

<div id="wrap"> <!-- Fixed navbar --> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="brand" href="#">Project name</a> <div class="nav-collapse collapse"> <ul class="nav"> <li><a href="#" id='tutorial'>Tutorial</a></li> </ul> </li> </ul> </div><!--/.nav-collapse --> </div> </div> </div> <!-- Begin page content --> <div class="container"> <div class="page-header"> </div> <p class="lead bootstro" data-bootstro-title='Title' data-bootstro-content="Description." data-bootstro-width="400px" data-bootstro-placement='bottom' data-bootstro-step='0'>Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added within <code>#wrap</code> with <code>padding-top: 60px;</code> on the <code>.container</code>.</p> <p class="bootstro" data-bootstro-title='Title' data-bootstro-content="Description." data-bootstro-width="400px" data-bootstro-placement='bottom' data-bootstro-step='1'>Back to <a href="./sticky-footer.html">the sticky footer</a> minus the navbar.</p> </div> <div id="push"></div> </div> <div id="footer"> <div class="container"> <p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p> </div> </div> 

It looks like there was an address https://github.com/clu3/bootstro.js/issues/15 , but I did not know how to apply (if necessary)

thanks

Answer 1

This can be done using the CSS z-index key, which determines the stack order of the element.

The navbar bootstrap has a z-index of 1030, so in order for the bootstro backdrop to bootstro backdrop navigation bar, you need to set the z-index to a level above 1030.
eg

 .bootstro-backdrop { .... z-index: 2000; } 

You also need to make sure bootstrap popover not enabled, so you need to increase its z index above 2000 .

 .popover { z-index:2001; } 

Fiddle