Materialize CSS - Sidenav overlay covers all the page

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>

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;
}

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

I had the same problem, and the fix is far easier than messing with any z-index. Simply make sure that your actual

<ul class="side-nav" id="mobile-sidenav">

content is outside of the <header></header> tags. If it's inside the header tags, you will see the same behavior you posted here.

In my opinion this is the fault of the otherwise-great Materialize documentation. They do make clear that the sidenav HTML should not be contained within the <nav></nav> tags, but don't indicate it won't work inside of the header tags.

In sum, your trigger needs to be within the <nav></nav> tags, and your actual sidenav content defined after the end of </header>. This is better than fiddling with z-index as that could break other things down the line and becomes a maintenance headache.