SideNav keep selected item highlighted

Topic: SideNav keep selected item highlighted

garrithsteyn pro asked 7 years ago

Hi How can I make my SideNav keep the current item selected? When I select a list item, the side nav 'resets'. If I select an item on your website, it would keep that selected item highlighted. Is there anything specific I may be missing? Thank you

Add comment

Marta Wierzbicka staff answered 6 years ago

1 0 Best answer

Hi, try this custom code: CSS:

.current-menu-item {
background: #33b5e5;
}

Jquery:

$(document).ready(function () {
$('.side-nav .collapsible li .collapsible-body ul li').click(function(e) {
$('.side-nav .collapsible li .collapsible-body ul li.current-menu-item').removeClass('current-menu-item')
$(this).closest('li').addClass('current-menu-item');
});
});

Best, Marta

Add comment

mdbpenguinglu pro answered 6 years ago

0 0 Best answer

@Marta active doesn't work. It's not highlighting.

Add comment

Marta Wierzbicka staff answered 7 years ago

0 0 Best answer

Please insert min. 20 characters.

Hello, you need to add class .active like here:

<li><a class="collapsible-header waves-effect arrow-r active"><i class="fa fa-home"></i> Homepages<i class="fa fa-angle-down rotate-icon"></i></a>
                    <div class="collapsible-body"> 
                        <ul>
                            <li><a href="" class="waves-effect active">Default Homepage</a> 
                            </li>
                            <li><a href="" class="waves-effect">Full Width Homepage</a>
                            </li>

Best, Marta

Adam Adamczyk free commented 6 years ago

With the latest version active class on item level seems to be not working - at least I do not see any difference.

Marta Wierzbicka staff commented 6 years ago

Hi, so how would you like this to look like? Best, Marta

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

garrithsteyn

Pro User 16Support score
10Questions 4Answers 0Snippets