Bootstrap 4 Navbar Active Class
Answer :
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
Comments
Post a Comment