Although my navbar was functioning properly with the hamburger menu expanding down as expected, I encountered an issue after adjusting the height of the navbar. The hamburger button still worked and expanded the menu, but it only displayed the first item on the menu (Home) while cutting off the rest. It seemed like the menu got stuck halfway through displaying the items and wouldn't expand further. After some troubleshooting, I found that the hamburger only worked flawlessly when the navbar was set to its default height. Any suggestions for resolving this?
<nav id="navbarMain" class="navbar navbar-expand-lg navbar-dark fixed-top shadow">
<a class="navbar-brand" href="/"> <i class="fas fa-book text-light"></i> Greybook</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Toys</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Store</a>
</li>
</ul>
</div>
</nav>
My CSS:
#navbarMain {
background-color: #525252;
height: 75px;
}