.menu { height: 50px; } .logo { height: 50px; } mat-toolbar { top: 0; position: fixed; min-height: 50px !important; background-color: #123C4C; color: white; z-index: 999; } .mat-toolbar-row { height: 50px !important; } .va-middle { vertical-align: middle !important; } .container { margin-top: 46px; display: flex; flex-direction: column; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .toolbar { position: fixed; /* Make sure the toolbar will stay on top of the content as it scrolls past. */ z-index: 2; } .sidenav-container { /* When the sidenav is fixed, don't constrain the height of the sidenav container. This allows the `` to be our scrolling element for mobile layouts. */ flex: 1 0 auto; } .mat-drawer { background-color: #124757; } .mat-list-item { color: white; } .mat-list-item:hover { background-color: #082830; } mat-sidenav { top: 46px; position: fixed; }