Within my container-fluid cont, I am customizing my navigation bar using Bootstrap.
The issue I am facing is that when I toggle the hamburger icon, nothing appears. My goal is for the navigation to collapse in mobile view, and upon clicking the toggler, the ul list of links should be displayed. What adjustments can I make?
<!-- NAVIGATION BAR -->
<nav class="navbar fixed-top navbar-expand-sm navbar-custom navbar-light">
<a class="navbar-brand js-scroll-trigger" href="index.html"><img src="images/logo.png" height="50px" width="auto"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCustom" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCustom">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active samecolor">
<a class="nav-link" href="#home">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#orari">SCHEDULE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#luogo">LOCATION</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.hmtl">ABOUT US</a>
</li>
</ul>
</div>
</nav>
Here are some CSS changes I made:
/*CUSTOMIZING BOOTSTRAP NAVIGATION*/
.navbar-custom {
background-color: #F5D236;
}
.navbar-custom .navbar-nav .nav-link {
color: #223D94;
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
color: #223D94;
}
.navbar-custom .dropdown-item {
color: #223D94;
}