I'm having trouble finding a solution to keep the top navigation bar fixed at the top of the screen without allowing it to scroll when the page becomes too long. I want to prevent the top nav bar from scrolling and maintain its position at the top of the screen.
Relevant Files below:
app.component.html
<div class="sidenavContainer" [class.app-dark-theme]="isDarkTheme" [class.app-candy-theme]="isCandyTheme" [class.app-custom-theme]="isCustomTheme">
<md-sidenav-container class="sidenavContainer">
<md-sidenav class="left-nav" id="leftNav" color="primary" #sidenav mode="over">
<md-toolbar layout="row" color="primary">
<h2>
<span>Side Panel</span>
</h2>
<span class="nav-spacer"></span>
<md-button class="close-icon" (click)=sidenav.close()>
<md-icon>close</md-icon>
</md-button>
</md-toolbar>
<nav-menu (onSelected)="setTheme($event)"></nav-menu>
</md-sidenav>
<md-toolbar class="top-nav" color="primary">
<button md-button (click)="sidenav.toggle()">
<md-icon>menu</md-icon>
</button>
<div id="navBarTitle">Dashboard</div>
<span class="nav-spacer"></span>
<div>Signed in as: AdminUser</div>
<md-icon class="nav-icon">
<div routerLink="/settings" mdTooltip="Settings">settings</div>
</md-icon>
<md-icon class="nav-icon" mdTooltip="Help">help</md-icon>
</md-toolbar>
<div class="router-container">
<router-outlet></router-outlet>
</div>
</md-sidenav-container>
</div>
app.component.css
.sidenavContainer {
height: 100%;
width: 100%;
}
/deep/ .mat-sidenav-transition .mat-sidenav-backdrop.mat-sidenav-shown {
background: rgba(0, 0, 0, 0.1);
}
.close-icon {
cursor: pointer;
margin-top: 9px;
}
.top-nav {
position: fixed;
width: 100%;
height: 64px;
top: 0px;
}
.nav-icon {
padding: 0 15px;
cursor: pointer;
}
.router-container {
width: 100%;
position: relative;
top: 64px;
}
Despite using position: fixed;, it seems that the top navigation bar is still not staying fixed.