[Resolved] Highlighting parent menu item of a child page when child page is not in menu

[Ethan]

Hello!

I have a parent page that has a number of child pages. All of the child pages are are set to that parent page. However, the parent page menu item is only highlighted when the child page is also included in the menu. I want the parent page menu item to be highlighted when a user is on the child page, even though the child page isn’t also in the menu.

The site is still in development so I will submit the login info via the form.

Once you can see the site, a specific example is this:
– Parent page is “Resources.”
– Two examples of child pages are “Vocabulary” and “Schools.” Both of these are set to have “Resources” as the parent page (links available on Resources page).
– I added “Vocabulary” page to the menu, under “Resources” just to try it out, and when on “Vocabulary” page, the parent page menu item is correctly highlighted (as expected).
– “Schools” child page is not in the menu, and the parent page menu item does NOT highlight when viewing the “Schools” page – but I want the parent menu item (Resources) to be highlighted when on this (and other) child page that is not included in the menu.

GeneratePress 2.2.2

GP Premium 1.7.8

[David]

Hi there,

could you provide a link to the site. You can edit your original topic and use the Site URL field for privacy.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ethan]

The site is not live yet. I submitted log in information in an Account Issue contact form so you can log in to see it.

[Tom]

Hi there,

Give this CSS a shot:

.main-navigation .main-nav .current-page-ancestor > a {
    color: #f2c100;
    background-color: #3f075e;
}

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Ethan]

Thanks, Tom – yes, that works and now the parent menu item is highlighted when on the child pages, even when the child pages aren’t in the menu. Thank you!

However, when I am on a child page that is NOT in the menu, the parent menu item hover color is applied when you hover over the parent menu item. This is different from when you are on a child page that IS in the menu, which does NOT show the parent menu item hover color when you hover over the parent item.

The lack of applying the hover color to the parent menu item when you are on a child page seems to be standard fare (examples on the site under “Membership/Donate”), and it used to bother me – but I’ve gotten used to it. So I guess it does’t matter which way it is, but can you help me make it at least standard across the site?

So either: when on a child page (regardless of if the child page is included in the menu), show the hover color on the parent menu item OR don’t show the hover color on the parent menu item.

[Tom]

Ah, give this a shot instead:

.main-navigation .main-nav .current-page-ancestor > a,
.main-navigation .main-nav .current-page-ancestor.sfHover > a,
.main-navigation .main-nav .current-page-ancestor:hover > a {
    color: #f2c100;
    background-color: #3f075e;
}

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Ethan]

Genius! Thank you!

[Tom]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Alexandre]

Hi,

I’m trying to apply this code to my situation. It works but not completely. The menu label gets the same color as the background.

.elementor-nav-menu--main .elementor-nav-menu .current-page-ancestor > a,
.elementor-nav-menu--main .elementor-nav-menu .current-page-ancestor.sfHover > a,
.elementor-nav-menu--main .elementor-nav-menu .current-page-ancestor:hover > a {
    color:#ffffff;
    background-color: #b21b16;
}

https://alexgauvin.com/cotefleury/produits/serrurerie/

Thanks for your support

[Alexandre]

OK,

I found it.

#menu-1-a19b848 .current-page-ancestor > a {
    color:#ffffff;
    background-color: #b21b16;
}

Simply replace menu-1-a19b848 with own menu ID

Thanks

[Tom]

Glad you got it working – thanks for sharing your code 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts