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.
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
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.
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
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
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
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
Perfect, thank you so much for the great support!
Have a nice weekend!
Uli
Glad we were able to help 
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
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
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
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.
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
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!
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
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!
Hi Jade,
thank you for your quick reaction. I usually are VERY happy about the really great themco support, but right now, I don’t agree …
You wrote:
The menus in the header builder works natively as expected
I’d only like to have a working horizontal menu with horizontal submenu. Is this part of the native functions of the header builder or does it support only vertical menus?
If horizontal menus are supported, the only thing I want is to have that running proper.
Best regards
Uli
Hi Uli,
The horizontal sub menu is fine, the problem is making it show for the current page and mixing it with the hover effect.
The menu is not designed for that and the code to achieve it is tricky.
For the last time, you can try adding this in Theme Options > CSS
.grk-menu li.menu-item.current-menu-item .sub-menu {
pointer-events: auto !important;
}
Then add 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'); }
);
});
As stated from previous replies, further customization from here would be getting into custom development which is outside the scope of our support.
Thank you for understanding.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.