I have built a website using Bootstrap 4 in ASP.NET (.NET Framework). However, I am facing an issue when switching the website view from PC to mobile. The navbar-toggler-icon button is not working properly as the navbar content does not show up when I press the toggler-icon button. Even though the navbar-collapse id matches with the data-target, it still does not work. Can anyone assist me with this? Here is the code snippet:
<nav id="navbar" class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="/index.aspx">
<img class="logo" src="img/Logo/logo_Rueston.png" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="navbar-collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav navbar-center ml-auto">
<li class="nav-item ml-3">
<a class="nav-link" href="/index.aspx">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item ml-3">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item ml-3">
<a class="nav-link" href="#">Products</a>
</li>
<li class="nav-item ml-3">
<a class="nav-link" href="#">Rueston Water</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item ml-3">
<a class="nav-link" href="#">
<asp:Label ID="lbLogin" runat="server" Text="Login"></asp:Label>
</a>
</li>
<li class="nav-item ml-3">
<a class="nav-link" href="#">
<asp:Label ID="lbSignup" runat="server" Text="SignUp"></asp:Label>
</a>
</li>
</ul>
</div>
</div>
</nav>
Here is a screenshot of the issue: