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

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

Home Forums Support Highlighting parent menu item of a child page when child page is not in menu

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #840699
    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.

    #840734
    David
    Staff
    Customer Support

    Hi there,

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

    #840960
    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.

    #841089
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Give this CSS a shot:

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

    Let me know πŸ™‚

    #841719
    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.

    #841739
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #841758
    Ethan

    Genius! Thank you!

    #842319
    Tom
    Lead Developer
    Lead Developer

    You’re welcome πŸ™‚

    #888422
    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

    #888437
    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

    #888932
    Tom
    Lead Developer
    Lead Developer

    Glad you got it working – thanks for sharing your code πŸ™‚

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.