Buffet Time:

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

Side Panel




close







menu


Dashboard


Signed in as: AdminUser


settings


help

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.