Angular 4 - Top Navigation Bar not staying locked to the top

Question

I can't figure out a way to lock the top navigation bar to stay at the top of the screen. When the page gets too long, then scrolling is enabled. I'm attempting to disallow the top nav bar from being scrolled and have it fixed to the top of the screen.

Pertinent 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;
}

For some reason position: fixed; doesn't seem to work.

Answer 1

So it seems as though you just need to use absolute positioning to achieve this.

app.component.css

.sidenavContainer {
    height: 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 {
    height: 64px;
    position: fixed;
    top: 0px;
}

.router-container {
    width: 100%;
    overflow: auto;
    position: absolute;
    bottom: 0;
    top: 64px;
}

.nav-icon {
    padding: 0 15px;
    cursor: pointer;
}

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>

And this achieved what I wanted with having the bottom bar stay locked to the top and not overlay on top of the main content.