On my Wordpress site, I am faced with a simple problem to solve. I have a primary menu at the top and a secondary menu on the left side. While the top menu only contains level 1 items, the left menu has all the items. To customize the left menu, I am utilizing the default "Custom menu" widget.
To streamline the appearance, I want to display only the relevant items on the left, specifically those with the class "current-menu-ancestor."
What is an elegant way to achieve this, by dynamically generating only necessary HTML code? This could involve creating a custom function in functions.php (utilizing a Twenty Eleven child theme) or using an "Advanced Custom Menu" plugin if available.
I have attempted a CSS approach and made progress. By selecting green for items I wish to show and red for those I want to hide, I encountered difficulties applying a CSS rule like
display: noneto hide the red items without affecting the green ones.
This is the current state of my CSS:
#secondary ul {background: red;}
#secondary li.current-menu-ancestor ul,
#secondary li.current-menu-item ul {background: green;}
Visit to see a sample page illustrating the red items I aim to hide and the green items I intend to keep visible.
The goal is to have only the green items displayed on the left menu.