When I customized the background for the nav-bar in Bootstrap 4 and added a nav-toggler-icon for small screens, I encountered an issue where the hamburger icon was not displaying. However, it worked fine when clicked. How can I resolve this problem?
The HTML code snippet is as follows:
<nav id=header-nav class="navbar navbar-expand-md navbar-custom ">
<a href="index.html" class="navbar-brand">
<h1 class="tagline">Subha</h1>
</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#hamburger">
<span class=" navbar-dark navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="hamburger">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a href="#" class="nav-link">Cart</a></li>
<li class="nav-item">
<a href="#" class="nav-link">Login</a></li>
</ul>
</div>
</nav>The CSS code for the nav bar customization is as follows:
.navbar-custom
{
background-color: rgb(144,12,25);
border-radius: 0;
border: 0;
}