-
Hi there,
I’ve implemented a mega menu following the instructions from this article:
https://docs.generatepress.com/article/building-simple-mega-menu/I’ve also added some custom styling to improve the visual layout. Overall, it works well — but I’m experiencing one issue I can’t solve:
Issue:
When I hover over the “Familierecht” top-level menu, the mega menu appears correctly.
However, as soon as I move the mouse into the submenu and hover over the second or third column (e.g., “Kinderen & ouderschap”), the submenu of a different top-level item (“Over ons”) opens instead.This only seems to happen when hovering down-and-right into the lower columns of the mega menu.
Please check only the main (Dutch) version of the site; the /en/ version is still incomplete.
Thanks in advance for looking into this!
If this is too complicated or requires a lot manual work, is a plugin like https://wordpress.org/plugins/megamenu/ than better to use?
-
Hi,
In the mean time I fixed this with some CSS and javascript.
@media (min-width: 769px) {
.main-nav > ul > li.menu-item-has-children .sub-menu {
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.2s ease;
}.main-nav > ul > li.menu-item-has-children.hovering .sub-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
}<script>
document.querySelectorAll(‘.main-nav > ul > li.menu-item-has-children’).forEach(item => {
let timeout;item.addEventListener(‘mouseenter’, () => {
clearTimeout(timeout);
item.classList.add(‘hovering’);
});item.addEventListener(‘mouseleave’, () => {
timeout = setTimeout(() => {
item.classList.remove(‘hovering’);
}, 150); // milliseconden delay
});const submenu = item.querySelector(‘.sub-menu’);
if (submenu) {
submenu.addEventListener(‘mouseenter’, () => clearTimeout(timeout));
submenu.addEventListener(‘mouseleave’, () => {
timeout = setTimeout(() => {
item.classList.remove(‘hovering’);
}, 150);
});
}
});
</script> -
Glad to hear that 🙂
- You must be logged in to reply to this topic.