Keeping Current link and Ancestor link active in the main menu (HEADER)

[dmuller]

Hello, I have an issue that I hope there is a solution for. My site has several main pages, off these come ‘child pages’, four or five for each main page.

I have now configured the menu so that the mouseover highlight for each main page remains after navigating to the main pages. However, despite setting the sub-pages as both submenu options in the WordPress menu and as child pages for each main page when navigating to the subpages the particle highlight in the main menu turns off - this despite setting the ancestor links to ON in the Header menu page in the Pro editor.

[nabeel]

Hi @dmuller,

Thank you for reaching out to us. You can do this with custom CSS, try adding the following code in the Theme Options > CSS:

li.menu-item.current-page-ancestor {
    background: rgba(53, 72, 140, 0.8);
}

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Hope this helps!

[dmuller]

@nabeel

li.menu-item.current-page-ancestor {
    background: rgba(53, 72, 140, 0.8);
}

Perfect, I just added:

}
li.menu-item.current-page-ancestor .x-anchor-text-primary {
color: #fff!important;
}

To keep the text highlighted too. Thanks so much for your help!

[marc_a]

Hi @dmuller,

Great and you’re welcome! If you have any other concerns and clarifications regarding our theme features, feel free to open up a new thread.

Thank you.