navbar-fixed AND mobile collapsable menue.

[blomdahldaniel]

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!

[carlosperate]

You didn't include the initialisation code as indicated in http://materializecss.com/navbar.html#mobile-collapse :

    $( document ).ready(function() {
      $(".button-collapse").sideNav();
    });

http://codepen.io/anon/pen/jPZKaP

[blomdahldaniel]

Sorry, i forgot to include that here in the issue, but it is in my project code.

And as you can se in your codepen the navbar-fixed at the top is not "under" the faded black overlay from the collaps menu. That is the problem.

[carlosperate]

You are right, I was under the impression this issue was solved ages ago: #437 #393

What I did as a workaround was quite convoluted as I was trying to go around other issues that existed at the time (and also keep the fixed header only on large resolutions), but seems to be still working so I'll add it to this codepen, you can probably simplify it: http://codepen.io/anon/pen/XbZYPg
(is an extract from my project, so there is probably things left over, but you get the idea)

[blomdahldaniel]

Sweet @carlosperate!

I just came across the same error with the fixed-action-button
It acts just like the fixed navbar. You think your fix in the codepen also solves this?
(i cant try it right now...)

[tonyjames]

Increasing the z-index of #sidenav-overlay from 997 to 998 worked for me. The overlay now covers .navbar-fixed.

[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?

[blomdahldaniel]

I will let a contributor close this issue or give it a feature tag.

[JimishF]

plz have a look at this.
#1735

[blomdahldaniel]

Sorry @JimishF I dont see what #1735 has to do with this issue?

[tomscholz]

Please close

[skdmkygo]

dude , what problme for my code ?? why still like this

http://codepen.io/skdmkygo/pen/PpbdaE

[greganswer]

If you want to have a fixed navbar with a collapsible menu you have to put the side-nav ul outside the navbar-fixed. I think it has to do with some z-index values for the sidenav-overlay and navbar-fixed as demonstrated here.

[Feuda]

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

[tomscholz]

These issues are all duplicates:
#1664
#3918
#4046
#4231
#437
#4318
#3982
#2879
#4187

For the future discussion, please use this issue instead.
#3844

[flamurbeqiri1]

Decreasing the z-index of #sidenav-overlay from 997 to 993 worked for me.