I am experiencing an issue with my bootstrap navbar on mobile devices. It remains visible even when the navbar-toggler is collapsed.
Below is the code snippet:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="/"><i class="fas fa-blog"></i> Tech Info</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="d-flex flex-row-reverse collapse navbar-collapse" id="navbarSupportedContent1">
<ul class="nav justify-content-end">
<% if(!user) { %>
<li class="nav-item">
<a class="nav-link my-2 my-sm-0" href="/login">Sing In</a>
</li>
<li class="nav-item">
<a class="nav-link btn btn-outline-primary my-2 my-sm-0" href="/register">Sign Up</a>
</li>
<% } %>
</ul>
</div>
</div>
</nav>