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 always occupies the top part, something like this:

Example

Here´s my code:

 <mat-sidenav-container class="sidenav-container" autosize> <mat-sidenav #drawer class="sidenav" fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'side' : 'push'" [opened]="(isHandset$ | async)"> <mat-toolbar class="fixed-header"> <img class="logooTest" src="data:image/gif;base64,test"/> </mat-toolbar> <mat-nav-list> <mat-list-item> <a routerLink="/dashboard">Test</a> <mat-icon mat-list-icon>home</mat-icon> </mat-list-item> <mat-list-item> <a routerLink="/dashboard">Test</a> <mat-icon mat-list-icon>home</mat-icon> </mat-list-item> <mat-list-item> <a routerLink="/test">Test</a> <mat-icon mat-list-icon>tune</mat-icon> </mat-list-item> <mat-list-item> <a routerLink="/#">Test</a> <mat-icon mat-list-icon>settings</mat-icon> </mat-list-item> <mat-list-item> <a routerLink="/#">Test</a> <mat-icon mat-list-icon>layers</mat-icon> </mat-list-item> <mat-list-item (click)="showSubmenu = !showSubmenu" class="parent"> <span class="full-width" *ngIf="isExpanded || isShowing">Test dropdown</span> <mat-icon mat-list-icon>flash_on</mat-icon> <mat-icon class="menu-button" [ngClass]="{'rotated' : showSubmenu}" *ngIf="isExpanded || isShowing">expand_more</mat-icon> </mat-list-item> <div class="submenu" [ngClass]="{'expanded' : showSubmenu}" *ngIf="isShowing || isExpanded"> <mat-list-item> <a routerLink="/#">Test</a> </mat-list-item> <mat-list-item> <a routerLink="/#">Test</a> </mat-list-item> <h2 matSubheader><mat-icon>account_balance</mat-icon> Test</h2> <mat-list-item (click)="showSubSubMenu = !showSubSubMenu" class="parent"> <span class="full-width" *ngIf="isExpanded || isShowing">Test</span> <mat-icon class="menu-button" [ngClass]="{'rotated' : showSubSubMenu}" *ngIf="isExpanded || isShowing">expand_more</mat-icon> </mat-list-item> <div class="submenu" [ngClass]="{'expanded' : showSubSubMenu}" *ngIf="isShowing || isExpanded"> <mat-list-item> <a routerLink="/test">Test</a> </mat-list-item> <mat-list-item> <a routerLink="/#">Test</a> </mat-list-item> <h2 matSubheader><mat-icon>card_travel</mat-icon> Test</h2> <mat-list-item> <a routerLink="/#">Test</a> </mat-list-item> <mat-list-item> <a routerLink="/#">Test</a> </mat-list-item> </div> </div> </mat-nav-list> </mat-sidenav> <mat-sidenav-content> <mat-toolbar color="primary" class="mat-elevation-z5"> <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()"> <mat-icon aria-label="Side nav toggle icon">menu</mat-icon> </button> <span class="spacer"></span> <div class="navigation"> <a class="button" href=""> <mat-icon class="logoutIcon">exit_to_app</mat-icon> <div class="logout"><span class="aligned-with-icon">Salir</span></div> </a> </div> </mat-toolbar> </mat-sidenav-content> </mat-sidenav-container>

I'm using the version 5.6.0 of Angular and Angular Material. I tried using CSS and also changing the order of the structure of the code, but this last one simply gave me errors and more errors; preventing the application from running.

Answer 1

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 .

Answer 2

对我来说，只需像 G. Tranter 一样更改 html 并将 mat- fixedInViewport中的 fixedInViewport 从true设置为false

Answer 3

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 4

.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 5

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 6

Your pattern must be like this in the html:

<mat-toolbar color="primary">
   ...
</mat-toolbar>

<mat-sidenav-container>
  <mat-sidenav>
     ...
  </mat-sidenav>
  <mat-sidenav-content>
     ...
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

Then style it with your css like this:

.mat-toolbar {
  position: sticky;
  top: 0;
  z-index: 99;
}

make sure you z-index is about your other content that scrolls under it.