Angular2 + Material: mat-toolbar casts no shadow over mat-sidenav-container despite mat-elevation-z*

Question

Trying to mimic the look of the Material guide , I can't get the toolbar's shadow to be rendered atop the mat-sidenav-container element:

Page showing toolbar and sidenav, but drop shadow isn't visible:

Page showing the toolbar alone, the shadow is rendered:

See the HTML code, it can't be more simple. What am I missing? Thanks...

app.component.html

<mat-toolbar class="mat-elevation-z6" color="primary">
  toolbar
</mat-toolbar>

<mat-sidenav-container >

  <!-- Side menu -->
  <mat-sidenav mode="side" opened="true">

    <h3>Menu 1</h3>
    <ul>

      <!-- Home (aka dashboard) -->
      <li>
        <a routerLink="/">dashboard</a>
      </li>

      <!-- Home (aka dashboard) -->
      <li>
        <a routerLink="/resolutions">resolutions</a>
      </li>
    </ul>

    <!-- List resolutions -->
    <h3>Menu 2</h3>
    <ul>
      <li>
        <a>incentive</a>
      </li>
    </ul>

  </mat-sidenav>

  <!-- Routed contents -->
  <div class="contents">
    <router-outlet></router-outlet>
  </div>

</mat-sidenav-container>

Answer 1

had the exact same issue. I resolved it by adding the following class in my CSS:

.sidenav-container {
  z-index: -1 !important;
}

and added it to the mat-sidenav-container

<mat-sidenav-container class="sidenav-container">
...
</mat-sidenav-container>

Answer 2

Add this in your styles:

.mat-toolbar {
  position: relative;
  z-index: 2;
}

Answer 3

I solved the problem as follows:

CSS:

.tbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
}

Then in my template:

HTML:
<mat-toolbar class="mat-elevation-z6 tbar">
  ...
</mat-toolbar>

Answer 4

not been able to test but. I had a similar sounding issue with cards not looking elevated. I just need to pad them out from the hard left.

<mat-sidenav mode="side" opened="true" style="margin: 10px;">

Answer 5

You can also try this:

.sidenav-container {
  position:fixed;
  width:100%;
  z-index:-1;
}

Answer 6

If changing the z-index doesn't work, add the following class:

<mat-toolbar class="mat-elevation-z2"></mat-toolbar>

As per the angular guide: ( https://material.angular.io/guide/elevation )

Answer 7

I think changing z-index is not optimal. Better solution is to just add transparent background to your sidenav components.

mat-sidenav-container {
   background: transparent;
   
   mat-sidenav {
      background: transparent; // that one is also necessary if you have mode="side" on your mat-sidenav element
   }
}

Worked for me like a charm.

Answer 8

Check if you have a class .mat-drawer-container (You need to search in your CSS files because if you have a background defined, this layer will overload your shadow navbar)

You need to set .mat-drawer-container background as "none"

.mat-drawer-container {
  background: none !important;
}

This will solve your issue!