Archived topic
Underline parent item in menu for sub pages which is not in menu
3 replies · Started by Katrin on April 1, 2021
Hey,
I use a underline to highlight to show the current location on the website.
Now I want that the underline is shown for the parent item when I'm on a sub page. But those sub pages are not part of the menu since this would be already 3rd layer.
Eg. I want "Metallbearbeitung" to be underlined when someone is on the page "Laserschneiden". Same I would like to have for Posts in the Blog.
I don't like that solution, because I can not add all blog posts to the nav. That may be to much work over the time: https://generatepress.com/forums/topic/sub-page-not-showing-menu-hover-line/
Also this solution highlights only the direkt parent. eg. for "laserschneiden" it highlights "Fertigungsverfahren": https://generatepress.com/forums/topic/highlighting-parent-menu-item-of-a-child-page-when-child-page-is-not-in-menu/
Do you have an other idea to make that work? Link and guest login in private field.
Best regards,
Katrin
Hi there,
Try changing this CSS:
.main-navigation .menu > .menu-item.current-menu-item > a::after, .main-navigation .menu > .menu-item.current-menu-ancestor > a::after, .main-navigation .menu > .menu-item > a:hover::after, .main-navigation .menu > .menu-item > a:focus::after, .main-navigation .menu > .menu-item > a:active::after {
width: 100% !important;
}To:
.main-navigation .menu > .menu-item.current-menu-item > a::after, .main-navigation .menu > .menu-item.current-menu-ancestor > a::after, .main-navigation .menu > .menu-item > a:hover::after, .main-navigation .menu > .menu-item > a:focus::after, .main-navigation .menu > .menu-item > a:active::after,
.main-navigation .menu > .menu-item.current_page_parent > a::after,
.parent-pageid-466 .main-navigation .menu > .menu-item.menu-item-567 > a::after {
width: 100%;
}The last two selectors are as follows:
1. This is for the blog posts:
.main-navigation .menu > .menu-item.current_page_parent > a::after
2. This is very specific:
.parent-pageid-466 .main-navigation .menu > .menu-item.menu-item-567 > a::after
It will highlight: metallbearbeitung (ID 567) when you're on a child page of Fertigungsverfahren ( ID 466 ).
It does mean you would need to create an individual selector for each sub menu item you want highlighted.
This works perfectly! Thanks for the amazing support!
Glad to hear that
