Topic: Scrollspy active class assignment
I am using an mdb template and for the current navigation item the active class is assigned to the list element (li). Scrollspy applies the active class to the link element (a) rather than the list element (li), therefore my nav items aren't being highlighted as I scroll.
Is there a way to change this behaviour and assign the active class to the list element?
Template example:
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Services</a>
</li>
</ul>
I have found a solution by adding the "nav-pills" class to the "ul" element (must be final class in list) and then using some custom css.
Template HTML:
<ul class="navbar-nav mr-auto nav-pills">
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Services</a>
</li>
</ul>
Custom CSS:
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
color: #fff;
background-color: rgba(255, 255, 255, 0.1);
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.14.1
- Device: Laptop
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No
Grzegorz Bujański staff commented 4 years ago
Hi. Unfortunately, at the moment the active class is added to the a tag and it is not possible to change it. Best, Grzegorz