How to set Bootstrap Navbar active class - navbar

Question

I am using Bootrstap 4 and I cannot figure out why my active class is not working. I have followed examples and documentation but I am still having issues figuring out why it is not working.
My head tag conains jquery then popper then bootstrap in index.html.
COMPONENT.HTML
<!--COMPONENT.HTML-->
<nav class="navbar navbar-expand-lg navbar-dark navbar-custom">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTop"
aria-controls="navbarTop" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTop">
<ul class="nav navbar-nav w-100">
<li class="nav-item ml-4">
<a class="nav-link active" data-toggle="collapse" data-target=".navbar-collapse.show"
routerLink="">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item ml-4">
<a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show"
routerLink="/landscaping">Landscaping</a>
</li>
<li class="nav-item ml-4">
<a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show"
routerLink="/fences-decks">Fences & Decks</a>
</li>
<li class="nav-item ml-4">
<a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show"
routerLink="/sprinkler">Sprinklers</a>
</li>
<li class="nav-item ml-4">
<a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show"
routerLink="/remodeling">Remodeling</a>
</li>
<li class="nav-item ml-4">
<a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show"
routerLink="/concrete">Concrete</a>
</li>
<!-- <li class="nav-item ml-4">
<a class="nav-link" routerLink="/reviews">Google Reviews</a>
</li> -->
<li class="nav-item ml-4">
<a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show"
routerLink="/about">About</a>
</li>
<br>
<div class="text-right ml-auto">
<li class="nav-item">
<a class="nav-link text-info" data-toggle="modal" data-target="#emailForm"><span class="material-icons lightgrey">email</span> user#email.com</a>
</li>
<li class="nav-item">
<a class="nav-link text-info" href="tel:[phone]"><span class="material-icons lightgrey">phone_in_talk</span> 801-759-4477</a>
</li>
</div>
</ul>
<script>
$("#navbarTop .nav .nav-item").on("click", function(){
$(".nav-link").find(".active").removeClass("active");
$(this).addClass("active");
});
</script>
</div>
</nav>

Answer 1

$(document).ready(function() {
$(".nav-item a").click(function() {
let active = $(".active-nav-item")
if (active) {
$(active).removeClass("active-nav-item");
$(this).parent().addClass("active-nav-item");
}
})
})
#topbar {
.topbar-social-list {
display: flex;
list-style: none;
padding: 0;
margin: 0;
text-align: center;
.topbar-social-list-item {
cursor: pointer;
transition: all 0.3s;
i {
transition: all 0.3s;
}
& i:hover {
transition: all 0.3s;
color: white !important;
}
}
}
}
.nav-sec {
background-color: rgb(14, 13, 13) !important;
.dropdown {
&:hover {
.dropdown-menu {
display: block; // left: -10px; border-radius: 0% !important; } } } .nav-list{ .nav-list-item{ transition: all 0.3s; &:hover{ transition: all 0.3s; background-color:
red !important;
a {
color: blue !important;
}
}
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="topbar" class="bg-dark">
<div class="container">
<div class="row">
<div class="col d-flex p-2">
<div class="topbar-mail me-3">
<i class="fa-solid fa-envelope text-danger"></i>
<span class="text-secondary">
info#example.com
</span>
</div>
<div class="topbar-phone">
<i class="fa-solid fa-mobile text-danger"></i>
<span class="text-secondary">
[phone]
</span>
</div>
</div>
<div class="col d-flex justify-content-end">
<ul class="topbar-social-list align-items-center">
<li class="topbar-social-list-item">
<i class="fa-brands fa-twitter text-secondary text-center me-3"></i>
</li>
<li class="topbar-social-list-item">
<i class="fa-brands fa-facebook text-secondary text-center me-3"></i>
</li>
<li class="topbar-social-list-item">
<i class="fa-brands fa-instagram text-secondary text-center me-3"></i>
</li>
<li class="topbar-social-list-item">
<i class="fa-brands fa-linkedin text-secondary text-center me-3"></i>
</li>
</ul>
</div>
</div>
</div>
</section>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark nav-sec p-0">
<div class="container">
<a class="navbar-brand fs-2 fw-bold" href="#">DAY</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end nav-list" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item nav-list-item p-lg-3 active-nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item nav-list-item p-lg-3">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item nav-list-item p-lg-3">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item nav-list-item dropdown p-lg-3">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu mt-3" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item nav-list-item p-lg-3">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>