navbar-fixed AND mobile collapsable menue.

Hi! This is a promising framework, I like it! I wonder though, it seems like there is no solution for having both the navbar-fixed and also use the nav-mobile button-collapse. As of now, the z-indexes is disturbing each other.

The error:

When the collapse mobile nav is pulled out, the fixed-navbar (at the top) is “above” the faded area.

My code

Here is my code that causes the problem.

<div class="navbar-fixed">
  <nav class="light-blue lighten-1" role="navigation">
    <div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">Logo</a>
      <ul class="right hide-on-med-and-down">
        <li><a href="#">Navbar Link</a></li>
      </ul>

      <ul id="nav-mobile" class="side-nav" style="left: 0px;">
        <li><a href="#">Navbar Link</a></li>
      </ul>
      <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
    </div>
  </nav>
</div>

I hope you guys will take a look at this soon because I think that the combination of navbar-fixed and the mobile slide out menu will be very common. Or perhaps am I just doing it wrong?

And again, sweet framework!

[blomdahldaniel]

Thanks to @carlosperate codepen i saw that my .side-nav should be outside of the <nav> ... </nav> and that fixed it (with the correct z-index settings).

In the navbar docs it says to put the .side-nav <ul> inside of the <nav> ... </nav> however when combining the <div class="navbar-fixed"> it should be outside of that div. Just like the codepen shows.

Maybe could add a comment about that in the docs?

[Feuda]

I think ‘outside the side-nav’ should be in docs @Dogfalo