Add class to menu ul with active child

I’m trying to add the class is-active to the ul when the ul has an active child. This is because Foundation requires that (i’m using FoundationPress as a base theme) This is the markup i’m after:

<ul class="vertical menu" data-multi-open="false" data-accordion-menu>
  <li><a href="https://wordpress.stackexchange.com/home/">Home</a>
    <ul class="vertical nested menu is-active">
      <li class="active">
        <a href="http://wordpress.stackexchange.com/sample-page/distribution/">Distribution</a>
      </li>
      <li><a href="http://wordpress.stackexchange.com/sample-page/">Sample Page</a></li>
      <li><a href="http://wordpress.stackexchange.com/sample-page/production/">Production</a></li>
    </ul>
  </li>
  <li><a href="http://wordpress.stackexchange.com/about/">About</a></li>
</ul>

Is it possible to hook in to nav_menu_css_class or do i have to make a custom walker or how should i go about to achieve this?

1 Answer
1

You certainly could build a custom walker, but perhaps the easiest way out is jquery:

$("li.active").parent().addClass("is-active");

Leave a Comment