Just beginning my HTML/CSS journey and currently experimenting with Bootstrap, specifically the navbar component.
I've made some adjustments to text alignment and added a logo. However, I encountered an issue when the screen size is reduced to trigger the menu dropdown with the burger icon. The icon appears but doesn't function when clicked.
I've included all necessary libraries but still can't get it to work. Here's the code snippet below. As a beginner in coding, any assistance would be greatly appreciated.
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a href="#" class="LogoIcon"><img src="G_icon.png" alt="" width="50px" height="50px"></a>
<a class="navbar-brand mr-auto" href="#">GRAFT</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
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 ml-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Work</a>
</li>
</ul>
<button type="button" class="btn btn-outline-primary">CONTACT</button>
</div>
</div>
</nav>