I'm currently developing a website using Bootstrap, and I want to add a custom style to active navigation items by creating a backdrop effect instead of just changing the text color.
Initially, I started with white text color for testing purposes, but I haven't been successful so far.
I've included the JavaScript code, and my goal is to apply a class to the span element within the active navigation item (li) link (a).
I have added an empty span to each line item link where I intend to apply the class for the active item. However, it doesn't seem to be working as expected.
$(document).ready(function () {
$('ul.navbar-nav > li.nav-item > a.nav-link')
.click(function (e) {
$('ul.navbar-nav > li.nav-item > a.nav-link > span')
.removeClass('active-pill');
$(this).addClass('active-pill');
});
});a.active-pill{
color: white;
}
.nav-link{
color:black;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"
integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o"
crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#"><span class="active-pill">Home</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span>Contact</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span>FAQs</span></a>
</li>
</ul>