Scrollspy active class assignment


Topic: Scrollspy active class assignment

ebrangwin asked 5 years ago

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>

Grzegorz Bujański staff commented 5 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


ebrangwin answered 5 years ago

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);
}

Grzegorz Bujański staff commented 5 years ago

I'm glad you found a solution. Best, Grzegorz.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: 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