How to hide a full menu except for items with current-menu-ancestor in WP

1 Views

I have a WordPress site where I’m trying to solve a very simple problem. I have a primary menu at the top and a secondary menu at the left side. The top menu contains level 1 items while the left menu has all the items. For the left menu I am using the built-in “Custom menu” widget.

To simplify the looks I would like to only show the items on the left which are relevant to the current area, namely items with current-menu-ancestor.

Read More

  1. Is there any way to do it elegantly, by generating only the needed code in HTML? Either by using some custom function in functions.php (I’m using a Twenty Eleven child theme), or by some “Advanced Custom Menu” plugin if there is such?

  2. I am trying to do it in CSS, and I’m almost there. I selected the items green what I like to keep and red what I would like to hide, but I cannot apply a CSS rule to display: none the red items, because then it hides the green items too.

My CSS so far is this: 

#secondary ul {background: red;}

#secondary li.current-menu-ancestor ul,
#secondary li.current-menu-item ul {background: green;}

Here is a sample page where you can see which are the red items I’m trying to hide and which are the green items I’m trying to keep.

http://kozossegikertek.hu/csatlakozz/

I would like to have only the green items visible on the left menu.

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. OK, I did the pure CSS solution. I’m still up for a WP specific solution if someone can do it:

    #secondary li a {
display: none;
}

#secondary li.current-menu-item ul a,
#secondary li.current-menu-ancestor ul a {
display: inherit;
}

  2. To hide an element via CSS, use the display: none; property.

    For something like the menu, you’ll want to use Javascript to change the css of the hidden element(s) when a condition is met (hover/click).