How to move element under a shadow in MaterializeCSS?

I'm building a simple store with MaterializeCSS. The code has a simple page version of this site. I am using two sidenav's that have some custom properties, nothing too complex. I would like the navbar shadow to overlay onto the sidebar like is described in the image.

The shadows should only be overlayed on the sidenav's when they are scaled-down. I'm not quite sure of the easiest way of doing this. Here is the demo code of the page. It uses the materialize cdn so it should just run.

<!DOCTYPE html>
    <html>
      <head>
        <!--Import Google Icon Font-->
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <!-- Compiled and minified CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
        <!--Let browser know website is optimized for mobile-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <!-- Website Title -->
        <title>Demo</title>
        <!-- Custom styles -->
        <style>
          /* Custom sizing for sidenav */
          .custom-sidenav {
            top: 64px;
          }
          @media only screen and (max-width : 600px) {
            .custom-sidenav {
              top: 0;
            }
          }
        </style>
      </head>
      <body>
        <!-- NavBar -->
        <header class="navbar-fixed">
          <nav>
            <div class="nav-wrapper">
              <a href="#" class="brand-logo center">The Store</a>
              <a href="#" data-target="sidenav-1" class="sidenav-trigger show-on-large brand-logo left"><i class="material-icons">menu</i></a>
              <a href="#" data-target="sidenav-2" class="sidenav-trigger show-on-large brand-logo right"><i class="material-icons">shopping_cart</i></a>
            </div>
          </nav>
        </header>
        <!-- Menu -->
        <aside>
          <ul id="sidenav-1" class="sidenav sidenav-fixed custom-sidenav">
            <li><a href="#">Menu Link 1</a></li>
            <li><a href="#">Menu Link 2</a></li>
            <li><a href="#">Menu Link 3</a></li>
            <li><a href="#">Menu Link 4</a></li>
          </ul>
        </aside>
        <!-- Shopping Cart -->
        <aside>
          <ul id="sidenav-2" class="sidenav sidenav-fixed custom-sidenav">
            <li><a href="#">Cart Link 1</a></li>
            <li><a href="#">Cart Link 2</a></li>
            <li><a href="#">Cart Link 3</a></li>
            <li><a href="#">Cart Link 4</a></li>
          </ul>
        </aside>
        <!-- jQuery -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <!-- Compiled and minified JavaScript -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
        <!-- jQuery Inline-->
        <script>
          $(document).ready(function(){
            $('.sidenav').sidenav();
            $('#sidenav-1').sidenav({ edge: 'left' });
              $('#sidenav-2').sidenav({ edge: 'right' });
          });
        </script>
      </body>
    </html>

Solution

Increasing the value of rule z-index to .navbar-fixed will solve your problem. Place this rule inside a <style> tag:

.navbar-fixed {
    z-index: 1000;
}

To revert back to the previous index value according to Materialize rules, set z-index to 997 or revert, inside the media query. Like this:

@media only screen and (max-width: 600px) {
    ...
    .navbar-fixed {
        z-index: 997;
    }
}

Shippet:

<!DOCTYPE html>
<html>
    <head>
        <!--Import Google Icon Font-->
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
        <!-- Compiled and minified CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
        <!--Let browser know website is optimized for mobile-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <!-- Website Title -->
        <title>Demo</title>
        <!-- Custom styles -->
        <style>
            .navbar-fixed {
                z-index: 1000;
            }
            /* Custom sizing for sidenav */
            .custom-sidenav {
                top: 64px;
            }
            @media only screen and (max-width: 600px) {
                .custom-sidenav {
                    top: 0;
                }
                .navbar-fixed {
                    z-index: 997;
                }
            }
        </style>
    </head>
    <body>
        <!-- NavBar -->
        <header class="navbar-fixed">
            <nav>
                <div class="nav-wrapper">
                    <a href="#" class="brand-logo center">The Store</a>
                    <a href="#" data-target="sidenav-1" class="sidenav-trigger show-on-large brand-logo left"><i class="material-icons">menu</i></a>
                    <a href="#" data-target="sidenav-2" class="sidenav-trigger show-on-large brand-logo right"><i class="material-icons">shopping_cart</i></a>
                </div>
            </nav>
        </header>
        <!-- Menu -->
        <aside>
            <ul id="sidenav-1" class="sidenav sidenav-fixed custom-sidenav">
                <li><a href="#">Menu Link 1</a></li>
                <li><a href="#">Menu Link 2</a></li>
                <li><a href="#">Menu Link 3</a></li>
                <li><a href="#">Menu Link 4</a></li>
            </ul>
        </aside>
        <!-- Shopping Cart -->
        <aside>
            <ul id="sidenav-2" class="sidenav sidenav-fixed custom-sidenav">
                <li><a href="#">Cart Link 1</a></li>
                <li><a href="#">Cart Link 2</a></li>
                <li><a href="#">Cart Link 3</a></li>
                <li><a href="#">Cart Link 4</a></li>
            </ul>
        </aside>
        <!-- jQuery -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <!-- Compiled and minified JavaScript -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
        <!-- jQuery Inline-->
        <script>
            $(document).ready(function () {
                $(".sidenav").sidenav();
                $("#sidenav-1").sidenav({ edge: "left" });
                $("#sidenav-2").sidenav({ edge: "right" });
            });
        </script>
    </body>
</html>