How can I apply an active state to a 2nd level menu bar

0
Can anyone give me specific instructions/example of how to add an "active" class to a menubar. I'm working on a reusable snippet for 2nd level menubar (not the top level navigation). I thought the menu bars might apply an active class by default, but this does not seem to be the case. I'd like it to be reusable, so that if the page title matches the menu item, it will automatically apply the active class. Is this possible? What is the best way to accomplish this?
asked
4 answers
2

if your really want to to do this you can add a HTML snippet(with jquery) and add this:

 

$('li.mx-navbar-item').addClass('active');

 

answered
2

Best thing to do in this case is to reference the parent class which could be a table ( I suggest you make this unique) before  referencing the class of the navigation and the navigation items.

Drilling through classes gives you more precision and control

answered
1

I tried this, but can't seem to get it to work:

$('.mx-navbar').on('click', 'li', function(){
    $('.mx-navbar .nav li').removeClass('active');
    $(this).addClass('active');
});

 

Any other suggestions?

answered
1

You can also use classes: give classes to the menu items and classes to the pages, that make make sure that menu items get 'active' on the right page.

for instance, give the Accounts page the class 'page-accounts' and the menu item the class 'menu-accounts', and add in your theme:

.page-accounts {
    .menu-accounts {
        *your css to make it appear active*
    }
}

answered