Below is the code I am using:
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8defe2e2f9fef9ffecfdcdb8a3bda3bf">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-light navbar-expand-sm bg-light">
<a class="navbar-brand mb-0 h1" href="#">NavBar</a>
<button
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
class="navbar-toggler"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a href="#" class="nav-link">Blue</a>
</li>
<li class="nav-item active">
<a href="#" class="nav-link">Red</a>
</li>
<li class="nav-item active">
<a href="#" class="nav-link">Green</a>
</li>
</ul>
</div>
</nav>When the window shrinks, the nav bar list items disappear and the menu icon appears. However, when I click on the menu icon, the list items do not appear as expected. They should be displayed below each other.
Can you identify what is causing this issue in my code?