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?
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.
- CSS Colors - https://goo.gl/rM1ys1
- CSS Color Values - https://goo.gl/rM1ys1
Hope this helps.
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.
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!
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.
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.
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?
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.
Thank you so much, brilliant!
Glad we were able to help you
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.