Keep Submenu visible if subpage selected

ULinn · April 11, 2019, 8:13am

Hello!
Is there any way, to keep a submenu visible, if one of it’s pages is shown?

Example:

HOME
TEAM

MR X
MRS Y
CONTACT

Standard-Menu: HOME | TEAM | CONTACT

If the “HOME” or “CONTACT” pages are shown, the above menu is visible and the active menu item is coloured. That works perfect right now.
But now, if the “Mr. X” page is shown, the submenu with “Mr. X” and “MRS Y” sould keep displayed with the “Mr. X” item coloured.

Is there a way to do this, so the user always can see on wich page he is right now?

See secure note for a link to the page.

Best regards

Uli

jade · April 11, 2019, 9:22am

Hey Uli,

Please add this code in the Global JS:

(function($){
    if($('.e154-6.x-menu .menu-item').hasClass('current_page_parent') ) {
		$('.e154-6.x-menu .menu-item.current_page_parent .sub-menu').addClass('x-active');
    }
})(jQuery);

Hope this helps.

ULinn · April 11, 2019, 3:16pm

Great, it helps indeed! But only for the “Team”-Menu, not for the other menus. Is there any way to have this function in general for all menus?

Is it possible, to have this also working, if the parent-page of the actual sub-page is active? Means the submenu of the active page is always shown, but not the submenus of the other pages?

Best regards
Uli

ruenel · April 11, 2019, 4:47pm

Hey Uli,

If you want to apply only for the Team menu item, please have the code updated and use this:

(function($){
    if($('.e154-6.x-menu .menu-item.menu-item-241').hasClass('current_page_parent') ) {
		$('.e154-6.x-menu .menu-item.menu-item-241.current_page_parent .sub-menu').addClass('x-active');
    }
})(jQuery);

We would love to know if this has worked for you. Thank you.

ULinn · April 12, 2019, 6:52am

Hi RueNel,

If you want to apply only for the Team menu item …

No I DONT want to apply only for the Team menu, I want to apply for all menus with submenus. Right now, it only works for the “team” item, but not for the “Philosophie” item.

ADDITIONALLY, I want to have all submenu items shown if their parent page is active, if this is possible.

Best regards

Uli

jade · April 12, 2019, 7:09am

Hey Uli,

Please try this code:

(function($){
    if($('.e154-6.x-menu .menu-item').hasClass('current-menu-parent') ) {
		$('.e154-6.x-menu .menu-item.current-menu-parent .sub-menu').addClass('x-active');
    }
})(jQuery);

Hope this helps.

ULinn · April 12, 2019, 7:51am

Hi Jade,
i tried your code, but now, it has no effect. It’s probably related to the fact, that in between, I use a different header for almost every page, probably the code has to be adapted?
Best regards
Uli

paul.r · April 12, 2019, 8:18am

Hi Uli,

Since you have different Headers, please add a class to your menus across headers.

eg.

Then change the code that was provided by my colleague to this

(function($){
    if($('.my-menu .menu-item').hasClass('current-menu-parent') ) {
		$('.my-menu .menu-item.current-menu-parent .sub-menu').addClass('x-active');
    }
})(jQuery);

Hope that helps

ULinn · April 12, 2019, 8:29am

Hi Paul,

great, now on all subpages everything is fine. The only thin that still does not work, is showing the submenu on the parent-page. If you look at /team, the submenu shuld be visible the same way as at the team’s subpages.

Best regards

Uli

paul.r · April 12, 2019, 9:21am

Hi Uli,

To achieve that, you can add the code below in Theme Options > CSS

.my-menu li.menu-item.current-menu-item .sub-menu {
    visibility: visible !important;
    opacity: 1 !important;
}

Hope that helps

ULinn · April 12, 2019, 9:37am

Perfect, thank you so much for the great support!

Have a nice weekend!

Uli

thai · April 12, 2019, 10:06am

Glad we were able to help

ULinn · April 15, 2019, 7:58am

Right now with all subpages assigned, a new problem occurs:
If a page with submenus is selected and the submenu is permanentely shown (as required), there is a conflict with other submenus. If the mous hovers another menu item with submenu, both submenus are shown at the same time.

Is there any way, to hide the actual submenu while hovering another one?

You can see this on page “kommunikationsgestaltung/” while hovering menu item “Team”

Any idea?

Best regards

Uli

paul.r · April 15, 2019, 8:17am

Hi Uli,

To fix it, you can add this code as well.

.my-menu .sub-menu.x-dropdown {
       z-index: 9999;
}

.my-menu  .sub-menu.x-dropdown.x-active {
       z-index: 99;
}

Hope that helps

ULinn · April 15, 2019, 8:27am

Hi Paul,
unfortunately, that does not help. If I hover the “Team”-Menu-Item, I can still see parts of the “Philosophie”-Submenu behind the “TEAM-Submenu”.
Best regards
Uli

paul.r · April 15, 2019, 10:12am

Hi Uli,

You can try adding this in Theme Options > JS

jQuery(function($) {
    $('.x-menu > li > .x-anchor').hover(
function(){
   $('.x-menu > li > .x-anchor').not(this).next('.x-dropdown').removeClass('x-active');

}
	); 
		
    
});

Further customization from here would be getting into custom development which is outside the scope of our support. To fix your customization issues, you may seek help from a third party developer.

Thank you for understanding.

ULinn · April 16, 2019, 12:29pm

Hi Paul,

unfortunateley, the new code shows no effect.

But right now, another problem occured (with or without the new code).

If I open the “Team” page, and hover the subpages in the submenu, no hover effect (colour-change) can be seen and the subpages can not be clicked. If I move over the main menu-item “Team” and then go down to the subpages, they get red an can be clicked.

That’s of cours not how it should be …

Best regards

Uli

nabeel · April 16, 2019, 7:54pm

Hey Uli,

The code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code falls outside of our support scope. Regretfully, this really isn’t something that we should continue on troubleshooting as product support because this is not a native function of the theme. You can search for a third party plugin that provides similar functionality as you desire or seek help from a third party developer.

Thank you for understanding. Take Care!

ULinn · April 17, 2019, 6:17am

Hi Nabeel,

my last question is not abaout the last code paul provided. I understand that this exeeds your support scope.

But the problem also occurs WITHOUT the new code and seems to be either caused by the core functions of the header bulider or the code provided by your stuff at the beginning of this ticket.

My aim is to have a working horizontal menu with a working submenu - I think this should work “out of the box” without the need of adding code. But I have to add code, because the header builder does not work as expected, It would be great to have this code supported until it really works.

Best regards

Uli

jade · April 17, 2019, 8:02am

Hi Uli,

Please note that the code provided from the beginning of this thread already falls beyond the scope of our support as it is all custom codes which extends the native functionality of the menu. The menus in the header builder works natively as expected but you require a certain functionality for your site. If you are not sure how to proceed, it would be best to get in touch with a developer to enhance the codes previously provided to fit your requirements.

Hope this explains it.

Cheers!