CODEWITHSUNDEEP
csswordpressdrop-down-menumenu
lowercase
lowercase

Reputation: 1220

Highlight Wordpress parent menu item when submenu link active

I have a simple menu in Wordpress.

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

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>

Upvotes: 2

Views: 5612

Answers (1)

ThemesCreator
ThemesCreator

Reputation: 1759

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.

Upvotes: 3

Related Questions