SuperVeetz SuperVeetz - 5 months ago 15
jQuery Question

Main part of page is going over/through the fixed navbar?

My problem is that my page content is going right through my navbar, i want the navbar to always be on-top.. my navbar was made through jquery, i believe its called a 'Sticky Navbar' (here is the example i followed: http://codepen.io/anon/pen/jpCqb ).. i've tried using z-index: -1; but that didn't work for me either.. On my page i used a bootstrap carousel .. :

<!-- start pageHeader, navbar and carousel get grouped -->
<div class="" id="page">

<!-- start myCarousel -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="images/slide1-1920x800.jpg" alt="...">
<div class="carousel-caption">
<h2>App Name Here</h2>
<p>An app that's actually worth donwloading.</p>
</div><!-- end item -->
</div><!-- end carousel-caption -->
<div class="item">
<img src="images/slide1.1-1920x800.jpg" alt="...">
<div class="carousel-caption">
</div><!-- end carousel-caption -->
</div><!-- end item -->
<div class="item">
<img src="images/slide1.2-1920x800.jpg" alt="...">
<div class="carousel-caption"><!-- end carousel-caption -->
</div>
</div><!-- end item -->

</div><!-- end carousel-inner -->

<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!-- end #myCarousel -->

<!-- start myNavbar -->
<nav role="navigation" class="navbar navbar-default" id="myNavbar">
<div class="container">

<!-- brand and toggle button get grpd for better mobile display -->
<div class="navbar-header">
<!-- toggle button -->
<button data-target=#navbar-responsive-collapse type="button" data-toggle="collapse" class="navbar-toggle">
<span>Tappity!</span>
</button><!-- end toggle button -->

<!-- start navbar-brand -->
<a href="#" class="navbar-brand">YourLogo</a>
</div><!-- end navbar-header -->

<!-- start navbar-responsive-collapse -->
<div id="navbar-responsive-collapse" class="collapse navbar-collapse">

<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Services</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Hi</a></li>
<li><a href="#">Hi</a></li>
<li><a href="#">Hi</a></li>
</ul>
</li>
<li><a href="#">There</a></li>
<li><a href="#">Yo</a></li>
</ul><!-- navbar-right -->

</div><!-- end navbar-responsive-collapse -->

</div><!-- end container -->
</nav><!-- end #myNavbar -->

<!-- start intro -->
<div class="well well-lg" id="intro">
<div class="container">
<div class="row">

<div class="col-sm-6">
<h2>Hey There !!</h2>
<p>This is just a lil somethin somethin .. </p>
</div>

<div class="col-sm-6">
<img class="" src="images/groceries2-transparentbg.png">
</d
</div>
</div><!-- end container -->
</div><!-- end #intro -->

</div><!-- end #page -->


Here is a Bootply that shows my problem: http://www.bootply.com/olXfRYF12a

Thanks in advance!

Answer

Adding this style to your stylesheet should solve the problem:

#myNavbar {
     z-index: 9999;
}

Bootply Link.

Comments