Archived topic
Menu: Dont highlight parent of current page
6 replies · Started by Yannick on May 30, 2022
Hello,
I struggle with the CSS for highlighting the current page in the menu. I have a 3 menu levels:
Menu item on level 1
-- Menu item on level 2
-- Menu item on level 3
-- Menu item on level 3
-- Menu item on level 2
If the user is on a page on level three the menu items on level 3 level 2 and level 1 all receive styling, in my case a different background color. But in this I only want the menu items on level 3 and level 1 styled. If the user in on oage on level 1 or level 2 the menu item itself and the parents should be styled. I think this abstract example make more sense if you look at the first menu item on the site i linked in the private information area.
Kind regards
Yannick
Hi Yannick,
Try this CSS:
#site-navigation .main-nav > ul > li> ul >li.current-menu-parent > a {
color: black;
}Hi Ying,
that worked great. Thanks a lot!
I have one follow up question realted to the off-canvas menu. In the off-canvas the sub-menu open if a user clicks the down-arrow. But my level 1 menu items are not linked to any page. Is there a way that that a user can click the text as well to show the sub menus in the off-canvas panel?
I have to come back to my first question, because I missed the hover styling. If I hover an a menu item on the third level the text color of the second level item is changed as well.
1. Try replace the previous CSS with this:
#site-navigation .main-nav > ul > li> ul >li.menu-item-has-children > a {
color: black;
}2. You can add # as the level 1 menu item link.
Hi Ying, thank you very much for your help!
You are welcome :)
