Roots - Multiple 'active' classes added in wp_nav_menu

1

Hi all.

Yep, I’m using Root/Sass for a project and I appreciate there are some older posts based on the subject, but none of which appear to resolved the issue.

Roots matches/replaces WP current- classes with ‘active’ so I’m getting multiple active classes for drop-down menu structures e.g.

ul  
   li.active
      ul
         li.active

The posts I’ve read gave forks and improvements and most of which are now within the Roots (7.0.1) nav.php. Any help greatly appreciated.

Cheers

2

bootstrap adds .active class to dropdowns as well as the navbar active links. but if you want to remove it you could just add the active state class in a variable and change the variable depending on menu_item_parent. here is the gist. you need to replace function cssClasses (these lines) with the function in the gist. right now all child menu items that are active get a class of active-child but if you don’t want any class to get added to the active child elements just make the variable in the conditional empty ($active_class = '';)

3

Slobich,

Thanks for the response. Checking out your gist and it looks like what I need. The only thing here is the project is working in Roots and not Sage so the nav.php and dependencies are different.

Also, I’m not a fan of Bootstrap so don’t have any of that functionality, though I don’t think its a factor in this instance.

Any thoughts? I don’t have the time to upgrade to Sage on this project.

Thanks again

4

My bad. I thought you had Roots examples but didn’t know how to set it up in Sage. Just replace roots_nav_menu_css_class function with the one in this gist. Basically the same stuff as in the previous gist.

5

You sir are gentleman and a scholar. Perfect solution!

Also, thanks for the heads up on the Sage fix. I’ll use in my next projects :smiley:

Cheers

1 Like