Search code examples
javascriptjquerycssjquery-pluginsparallax

Fixed position navigation bar not working

I'm using an parallax jquery plugin

What parallax.js will do is create a fixed-position element for each parallax image at the start of the document's body. This mirror element will sit behind the other elements and match the position and dimensions of it's target object.

I've added this markup for the navigation:

<nav class="nav-inner" role="navigation">

    <a class="navbar-brand" href="#"><img src="img/logo.png"></a>

</nav>

and this CSS :

.nav-inner {
  position:fixed;
  top:0;
  left:0;
  z-index:500;
 }

The problem is that when I scroll down the navigation doesn't stay fixed on top of the page as I expected.

Here is a jsbin to see it what happens.

Any suggestions on how can I make that navigation bar to stay fixed ?

Solution

  • Just set z-index:0 for all your parallax-mirror elements

    .parallax-mirror {z-index:0 !important;}

    Or change the attribute directly in elements style attribute because it has z-index:-100