Materialize CSS - Sidenav overlay covers all the page

Question

I am using Materialize css and I want to turn the navigation bar to sidenav in middle and small screens. I did it just like in the documentation. The problem is that when I click the menu button, sidenav is opened but it is like the image below

I am not able to click the links in the sidenav since the sidenav-overlay covers all the page even the sidenav itself. It is closing when I try to click a link. Any suggestions how to solve it?

HTML:

<div class="navbar-fixed">
    <nav class="">
        <div class="nav-wrapper red lighten-1">
            <div class="container-fluid">
                <a href="#!" class="brand-logo">
                    <img src="img/logo.png">
                </a>
                <a href="#" data-activates="mobile-sidenav" class="button-collapse"><i class="material-icons">menu</i></a>
                <ul class="right hide-on-med-and-down">
                    <li><a href="#">How It Works?</a></li>
                    <li><a href="#">Technology</a></li>
                    <li><a href="#">Pricing</a></li>
                    <li><a href="#">More</a></li>
                    <li><button class="waves-effect waves-light btn deep-orange">Request Demo</button></li>
                </ul>
                <ul class="side-nav" id="mobile-sidenav">
                    <li><a href="#">How It Works?</a></li>
                    <li><a href="#">Technology</a></li>
                    <li><a href="#">Pricing</a></li>
                    <li><a href="#">More</a></li>
                    <li><button class="waves-effect waves-light btn deep-orange">Request Demo</button></li>
                </ul>
            </div>
        </div>
    </nav>
</div>

I realized that the navbar-fixed have z-index of 997 (where sidenav-overlay is also 997), and I think it may cause the problem. However, side-nav have fixed positioning and z-index of 999. Is it dependent to its parent even if it has fixed position?

Edit: I can solve it with changing the left property of sidenav-overlay, but I don't want to set it manually. I am looking for another solution.

Answer 1

I had the same problem. Because <ul class="side-nav"> is contained within <div class="navbar-fixed"> and the overlay has the same z-index, you will always have this problem when using navbar-fixed.

You can mess around with the z-indexes of the various elements, but they each result in less than ideal displays when the side-nav is activated.

To work around this, I put <ul class="side-nav"> parallel in the document structure to <div class="navbar-fixed"> and the problem resolved itself. Like this:

<ul class="side-nav" id="mobile-sidenav">
  <li><a href="#">How It Works?</a></li>
  <li><a href="#">Technology</a></li>
  <li><a href="#">Pricing</a></li>
  <li><a href="#">More</a></li>
  <li><button class="waves-effect waves-light btn deep-orange">Request Demo</button></li>
</ul>
<div class="navbar-fixed">
  <nav class="">
    <div class="nav-wrapper red lighten-1">
      <div class="container-fluid">
        <a href="#!" class="brand-logo">
          <img src="img/logo.png">
        </a>
        <a href="#" data-activates="mobile-sidenav" class="button-collapse"><i class="material-icons">menu</i></a>
        <ul class="right hide-on-med-and-down">
          <li><a href="#">How It Works?</a></li>
          <li><a href="#">Technology</a></li>
          <li><a href="#">Pricing</a></li>
          <li><a href="#">More</a></li>
          <li><button class="waves-effect waves-light btn deep-orange">Request Demo</button></li>
        </ul>
      </div>
    </div>
  </nav>
</div>

Answer 2

Modify the materialize CSS file to change the #sidenav-overlay to

#sidenav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 120vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 996;
    will-change: opacity;
}

Answer 3

Modify the materialize CSS file to change the z-index in #sidenav-overlay to be 990. This solved the problem for me.