Highlight WordPress parent menu item when submenu link active

2 Views

I have a simple menu in WordPress.

I need to highlight the ACTIVE PARENT MENU ITEM when a submenu item is selected.

Read More

The problem is, whenever I do that via current-page-parent/current-page-ancestor – ALL menu items in the dropdown are have the active style applied to them as well as the parent.

Any ideas how I can do this without touching the submenu item styles? 

<ul id="menu-main" class="nav navbar-nav navbar-right">
  <li id="menu-item-249" class="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-249 dropdown"><a href="#">Parent Menu Item</a>
    <ul role="menu" class=" dropdown-menu">
      <li id="menu-item-251" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-251"><a href="#">Sub-menu Item</a></li>
    </ul>
  </li>
</ul>
Post Views: 2

Related posts

1 comment

  1. WordPress automatically add some classes to the ancestor of the current item, that you can use to highlight the parent item. You can see in your code, how WordPress added the classes current-page-ancestor and current-menu-ancestor.

    I recommend you to use .current-menu-ancestor because it will work with all the object types.

Comments are closed.