Currently, I am in the process of developing a MEAN stack application and using Bootstrap for styling purposes. While working on the project, I made some modifications by adding routing and ngIf statements. But now, I have encountered an issue where the navbar has stopped being responsive. Whenever I click on the navbar-toggler button, the navbar quickly expands and collapses.
Below is the code snippet causing the problem:
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="#">VeganGent</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample04">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" routerLink="/home">Home <span class="sr-only"></span></a>
</li>
<li class="nav-item" *ngIf="authService.loggedIn()">
<a class="nav-link" routerLink="/producten">Producten</a>
</li>
<li class="nav-item" *ngIf="!authService.loggedIn()">
<a class="nav-link" routerLink="/registreren">Registreren</a>
</li>
<li class="nav-item" *ngIf="!authService.loggedIn()">
<a class="nav-link" routerLink="/login">Login</a>
</li>
<li class="nav-item" *ngIf="authService.loggedIn()">
<a class="nav-link" routerLink="/profiel">Profiel</a>
</li>
<li class="nav-item" *ngIf="authService.loggedIn()">
<a class="nav-link" (click)="onLogoutClick()" style="cursor: pointer;">Logout</a>
</li>
</ul>
<form class="form-inline my-2 my-md-0">
<input class="form-control" type="text" placeholder="Search">
</form>
</div>
</nav>