Having an issue with the height of my mdb navbar in my Angular app. It randomly flips to a larger size when reloading the page, but returns to normal when I open the developer console in Chrome.
Two screenshots show the correct display and the incorrect increased height:
The navbar is in a separate Angular component added to the app.component.html like this:
<app-header></app-header>
<div class="d-flex p-2 justify-content-center">
<router-outlet></router-outlet>
</div>
The header structure resembles the example provided by mdb
<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark indigo" [containerInside]="false">
<mdb-navbar-brand>
<a class="navbar-brand" [routerLink]="'/dashboard'">Admin Console</a>
</mdb-navbar-brand>
<links>
<ul class="navbar-nav mr-auto">
<li class="nav-item" routerLinkActive="active">
<a class="nav-link waves-light" mdbWavesEffect [routerLink]="'/dashboard'">Dashboard</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link waves-light" mdbWavesEffect [routerLink]="'/todo'">Users</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link waves-light" mdbWavesEffect [routerLink]="'/todo'"">>A</a>
</li>
<li class="nav-item"> routerLinkActive="active">
<a class="nav-link waves-light" mdbWavesEffect [routerLink]="/todo">B</a>
</li>
</ul>
<span class="fill-remaining-space"></span>
<ul class="navbar-nav ml-auto">
<li *ngIf=!authService.isLoggedIn class="nav-item">
<a class="nav-link waves-light" mdbWavesEffect [routerLink]="'/sign-in'">Login</a>
</li>
<li *ngIf=authService.isLoggedIn class="nav-item">
&$lt;a class="nav-link waves-light" mdbWavesEffect (click)="this.authService.signOut()">Logout</a>
</li>
</ul>
</links>
I attempted adding sticky-top as Sideclass to improve behavior when fixed content resides inside the router-outlet. However, the issue resurfaces when dynamic content like a table is loaded into the router-outlet as shown here:
Any suggestions on how to prevent the navbar from resizing? Thank you!