Materialize: navbar-fixed AND mobile collapsable menue.

Created on 2 Jul 2015 · 15Comments · Source: Dogfalo/materialize

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!

Source

blomdahldaniel

Most helpful comment

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 on 3 Jul 2015

👍8

All 15 comments

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

carlosperate on 2 Jul 2015

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.

blomdahldaniel on 2 Jul 2015

👍1

You are right, I was under the impression this issue was solved ages ago: https://github.com/Dogfalo/materialize/issues/437 https://github.com/Dogfalo/materialize/issues/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)

carlosperate on 2 Jul 2015

👍2 ❤1

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...)

blomdahldaniel on 3 Jul 2015

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

tonyjames on 3 Jul 2015

👍3 ❤1

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).

Maybe could add a comment about that in the docs?

blomdahldaniel on 3 Jul 2015

👍8

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

blomdahldaniel on 3 Jul 2015

plz have a look at this.
https://github.com/Dogfalo/materialize/issues/1735

JimishF on 15 Jul 2015

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

blomdahldaniel on 15 Jul 2015

Please close

tomscholz on 28 Feb 2017

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

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

skdmkygo on 8 Mar 2017

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.