Content goes above fixed SideNav &#38; fixed Navbar

Topic: Content goes above fixed SideNav & fixed Navbar

ribomation pro asked 5 years ago

I'm struggling with realizing the "fixed SideNav & fixed Navbar" layout. The content (main) is scrolling above the topnav, instead of under it.

Please, help me trouble-shoot and what should I look for.

Here is the overall app layout

<header>
<mdb-side-nav #sidenav class="sidebar-bg fixed" [fixed]="true" [sidenavBreakpoint]="900">
<li>...logo...</li>
<li>...menu...</li>
<div class="sidenav-bg mask-light"></div>
</mdb-side-nav>

<mdb-navbar SideClass="navbar fixed-top navbar-toggleable-md navbar-expand-lg scrolling-navbar double-nav" [containerInside]="false">
<navlinks class="navbar-container">
<div class="float-left"><!-- SideNav slide-out button -->
<a (click)="sidenav.show()" class="button-collapse"><i class="fa fa-bars"></i></a>
</div>
</navlinks>
<mdb-navbar-brand>...</mdb-navbar-brand>
<navlinks>...</navlinks>
</mdb-navbar>
</header>
<main >
<div class="container-fluid mt-5" >
<router-outlet></router-outlet>
</div>
</main>

//Here is the body part
<body class="fixed-sn">
  <app-root></app-root>
  <noscript>Please enable JavaScript to continue using this application.</noscript>
</body>
</html>

//Where app-root consists of just
<router-outlet></router-outlet>