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

Add comment

ebrangwin answered 5 years ago

0 0 Best answer

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.

Add comment

Write

Create snippet

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

ebrangwin

15Support score
1Questions 1Answers

0Snippets likes 0Snippets