How to place "mat-toolbar" on top of "mat-sidenav" Angular Material 5
Solution 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.
Solution 2
for me just change the html like G. Tranter and set the fixedInViewport
in the mat-sidenav from true
to false
Solution 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>
Solution 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;
}
S. A
Updated on July 09, 2022Comments
-
S. A almost 2 years
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:
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.
-
S. A over 5 yearsThanks for answering! I know, I have tried to move the toolbar part aside, but all the code is damaged when I move it (It gives error and it does not load directly). That's why I was asking how I could put it so that this does not happen. Thanks again.
-
G. Tranter over 5 yearsWell maybe if you post your errors someone could solve that problem.
-
Furqan S. Mahmoud over 5 years@S.A you need to fix the errors first, and then use the tool bar as G.Tranter mentioned. this is the clean way to work.
-
Hazem HASAN about 5 yearsthanks foyr your answer, but I have the problem that my sidenav goes below my toolbar and i dont konw how to add padding top to view it completely
-
RyanNerd over 4 yearsCode only answers are rarely helpful. Please comment your code or expound on why this is the solution to the question.
-
Doodles over 4 yearsWhile this suggestion works, now there is another problem, the toolbar and sidenav are fixed position on the webpage and do not follow the view.
-
Brayan Loayza over 4 yearsyour code helped me a lot for other things haha thanks.
-
Kavinda Jayakody almost 4 yearsThis is the go for solution for me