I am using Bootstrap + Bootstro but can't make the top navbar to get behind the overlay.
http://jsfiddle.net/NJsYw/5/ (click on 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>
Looks like this was address here https://github.com/clu3/bootstro.js/issues/15 but I didn't know how to apply (if it is necessary)
Thanks
So you just add the class navbar-fixed-top and it will stay right where you want it.
To create a fixed top menu, use position:fixed and top:0 . Note that the fixed menu will overlay your other content. To fix this, add a margin-top (to the content) that is equal or larger than the height of your menu.
Wrap both #nabar-mid-collapse and #navbar-rt-collapse in a div with class row-fluid , and apply class col-xs-4 (*or any respective . col class according to the width you need for each item *) to both of them. There is no row-fluid in Bootstrap 3.
This can be done using CSS
the key is z-index
which specifies the stack order of an element.
The bootstrap navbar
has a z-index
of 1030 so in order for the bootstro backdrop
to cover the navbar you need to adjust the z-index
to be higher than 1030.
e.g.
.bootstro-backdrop
{
....
z-index: 2000;
}
You also need to make sure that the bootstrap popover
is not covered so you need to increase its z-index to be higher than 2000
.
.popover {
z-index:2001;
}
FIDDLE
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With