Parent page menu item active on subpages

Support
#1

Hi there, I realized a menu with Pro header.
How do I achieve that the main/parent page item is still active as soon as I load a subpage?

Show current parent page menu as active on subpages
#2

Hi there,

An option would be install and activate the child theme and login through FTP then edit the functions.php then add this code:

function special_nav_class($classes, $item){
    if( in_array('current-menu-item', $classes) || in_array('current-menu-ancestor', $classes) ){
            $classes[] = 'current-menu-item current_page_item';
    }
    return $classes;
}

add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);

If this does not work on your setup, you can make use of the Element CSS feature for the elements. You can do this by adding this code to the Element CSS of the inline navigation element you are using:

$el.x-menu > li.current_page_parent > .x-anchor[class*="active"] .x-anchor-text-primary {
  color: #000;
}

You may add more code to the CSS code above to further style the parent menu with an active submenu.

Hope this helps.

#3

Thanks for the immediate response, unfortunately none of both did work.
Unfortunately I can’t give you any login credentials as this is a staged page at the moment.

#4

Hi There @mwiedmann

Since you have plenty of licenses, I’m not sure which site link that you’re referring to. Could you please try following this solution (https://theme.co/apex/forum/t/main-page-active-in-menu-when-visiting-a-sub-page/46429/2?u=mldarshana) and see if that helps.

If you’re still having issues, please provide us with an example site URL to check your issue further.

Thanks!

#5

Actually I tried that initially and as it didn’t work I wrote this post.
I’m working local on a staging site on my computer so it’s not possible for you to login at the moment.

#6

Sorry for all the confusion here, @mwiedmann. You do not need any custom code to set the parent menu as active becaues the Navigation elements does have an Active Links options.

You can just enable the Ancestor Links.

Then, set the Interactive colors. It includes the Particle setup too.

In the screenshot below, the Events page is a child of Home.

By child, I mean it’s setup as a child menu and not a child page. Just clarifying.

Hope that helps.

#7

Hi, actually that’s not my question:

I have a main menu (main pages A, B, C) where only main pages are shown (no dropdown for child pages!).
But for site A for instance there are three child pages (AA, AB, AC).

When I visit page A the menu item “A” appears active, as soon as I move to child page AA the main menu item “A” appears inactive. How can I change that?

#8

Sorry for the confusion. Regretfully, there’s no feature for that in the theme. It would require custom programming to integrate the complete interaction features and that is not part of our support service. I will give the last idea to at-least help you get started with custom development but we will not continue custom developing this. I will instead forward this as feature request.

Please add this code in Header > JS and watch this demo: https://youtu.be/FUtLkmTS5Bc

jQuery(function($) {
	$('.x-menu-inline > .menu-item').each(function() {
		if($(this).hasClass('current-page-ancestor')) {
			$(this).children('.x-anchor').addClass('x-always-active')
		}
	})
})

That will only work for the link colors. You will need additional code to make that work for the Graphic Icon and the rest of the Interactions.

Hope that helps and thank you for understanding.

1 Like
#9

Thank you so much, brilliant!

#10

Glad we were able to help you :slight_smile:

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.