Question

I have searched and cannot find a custom “Walker” class that will hide the submenus from wp_nav_menu until you are on the parent page. I have found lots of ways to hide them or just show the submenus but not a way to only show submenus when you are in that section. Below is an example of how I need it to display:

Wp_nav_menu structure as it currently stands:

• Parent 1
• Parent 2
  • Child 1
  • Child 2
• Parent 3
  • Child A
  • Child B

-Display-

On Parent 1 / Homepage:

• Parent 1
• Parent 2
• Parent 3

On Parent 2 and Parent 2 child pages:

• Parent 1
• Parent 2
  • Child 1
  • Child 2
• Parent 3

Answer 1

You don’t need a custom walker to do this, it can be done using the CSS classes, and display:none;

e.g. you could start with:

.menu .sub-menu { display: none; }
.menu .current-menu-item .sub-menu { display:block; }
.menu .current-menu-ancestor .sub-menu { display:block; }

With a few additional rules, based on the classes applied to the body tag you could conditionally show and hide other menu items, using classes added to the menu items via the backend.