Bootstrap 4 navbar active class
There are multiple issues...
- The selector $('.nav li') does nothing because you have no
.nav
class used anywhere in the markup. It should be $('.navbar-nav .nav-link'). - You have
style="color:white"
on the links which will override any changes you make with theactive
class. - You have no CSS for the active class, and by default Bootstrap active class on navbar-dark is going to be white. What color are you trying to set?
- Set active in the
nav-link
instead of the li,
.navbar-dark .nav-item > .nav-link.active {
color:white;
}
$('.navbar-nav .nav-link').click(function(){
$('.navbar-nav .nav-link').removeClass('active');
$(this).addClass('active');
})
Demo: https://www.codeply.com/go/I3EjDb74My