How to place “mat-toolbar” on top of “mat-sidenav” Angular Material 5

Question

I\'m writing here since I have a question about Mat Toolbar and Mat-sidenav from Angular Material. I\'m trying to get the Sidenav to go under the toolbar and the toolbar alw

Answer 1

.example-mat-toolbar {
    position: sticky;
    position: -webkit-sticky; /* For macOS/iOS Safari */
    top: 0; 
    z-index: 10;
}
.example-sidenav-container {
    position: relative;
    height: 100%;
    display: block;
    transform: inherit;
}

Answer 2

A very simple way to do this is to add z-index to 10 in your mat-toolbar. Here is the css for that.

.mat-toolbar-example{
  position: fixed;
  z-index:10;
}

<mat-toolbar class="mat-toolbar-example"></mat-toolbar>

Answer 3

If you are using Angular 6 for your project you can easily generate a boilerplate for Mat-toolbar and Mat-sidenav by running the following command via cli:

ng generate @angular/material:materialNav --name myNav

Once you make the sidenav component visible, you should be see the following result

Mat Sidenav component

Answer 4

for me just change the html like G. Tranter and set the fixedInViewport in the mat-sidenav from true to false

Answer 5

Anything you put inside mat-sidenav-content appears beside the menu. The basic layout structure for toolbar above sidenav menu and content is:

<mat-toolbar>...</mat-toolbar>
<mat-sidenav-container>...</mat-sidenav-container>

Here's an example on StackBlitz.