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 <li>
if you are on that page or a parent / child page.
WordPress gives each active <li>
item a class of current-menu-item
, but I need to specifically target the grandparent <li>
only so I can add some styles for when it's active.
How is this achieved?
Updated
As pointed out in the the comments, I could use current-menu-ancestor
. However, this is only being generated on the Grandparent <li>
when you're on a parent or child page.
To clarify, if you're on the top level Grandparent page (/grandparent), these are the classes which are being generated within the <li>
:
.menu-item
.menu-item-type-post_type
.menu-item-object-page
.current-menu-item
.page_item page-item-12
.current_page_item
.menu-item-has-children
.menu-item-203
If you're on a parent (/grandparent/parent) or child page (/grandparent/parent/child), these are the classes which are being generated within the Grandparent <li>
:
.menu-item
.menu-item-type-post_type
.menu-item-object-page
.current-page-ancestor
.current-menu-ancestor
.current-menu-parent
.current-page-parent
.current_page_parent
.current_page_ancestor
.menu-item-has-children
.menu-item-203
If it helps, here are how my menus are generated within the template file:
<nav class="sidebar-navigation">
<ul>
<?php
$menu = array( 'container' => false, 'menu_class' => false, 'items_wrap' => '%3$s' );
// Left
wp_nav_menu( array_merge(
array( 'theme_location' => 'left' ),
$menu
) );
// Right
wp_nav_menu( array_merge(
array( 'theme_location' => 'right' ),
$menu
) );
?>
</ul>
</nav>
current-menu-ancestor
or similar already.current-menu-ancestor
is only being generated on the Grandparent<li>
when you're on a parent or child page. I've updated my question..active-grandparent
=ul.menu-class > .current_page_item, ul.menu-class > .current-menu-ancestor
?>
char ensure that this styles will be be applied only to first.current-menu-ancestor
or first.current_page_item
underul.menu-class
. See here .