Add class to active top level (grandparent) menu item

I’m building a site with a mega menu. Here’s what the structure looks like:

<ul>
<li class=”active-grandparent”>Grandparent
<ul>
<li>Parent</li>
<li>Parent</li>
<li>Parent</li>
<li>Parent
<ul>
<li>Child</li>
<li>Child</li>
<li>Child</li>
<li>Child</li>
</ul>
</li>
</ul>
</li>
<li>Grandparent</li>
<li>Grandparent</li>
<li>Grandparent</li>
</ul>

I’d like to add the class “active-grandparent” to the top level Grandparent if you are on that page or a parent / child page.

WordPress gives each active item a class of current-menu-item, but I need to specifically target the grandparent only so I can specify some specific styles.

How is this achieved?

Read more here:: Add class to active top level (grandparent) menu item

Leave a Reply

Your email address will not be published. Required fields are marked *