[Resolved] GP Mega Menu issue

[Matthias]

Hi Tom & Leo,

I’ve just updated to GP 2.0 and I love the speed improvements.

I do have a problem with the GP Mega Menu that I haven’t been able to solve: the grandchild-menu is not visible anymore when the mega menu is expanded.

Visitors now need to click the child-menu items to be able to see the grandchild-menu.

I believe that’s because of this rule:

.dropdown-click .main-navigation ul ul, .dropdown-click .secondary-navigation ul ul {
    visibility: hidden;
}

However, when I set it to visibility: visible; the grandchild-items don’t work as expected anymore: when I hover over one of the grandchild-items items, the child-item changes color and the grandchild items are not clickable.

Do you have any idea what could be the issue?

A few quick comments:
– I’m using GP 2.0 and GP Premium 1.5.6
– I’ve updated the GP Mega Menu css to make it compatible with GP 2.0
– I’ve deactivated all caching and minification plugins

Thank you!

[Tom]

Nice catch! Can you try the updated CSS?: https://docs.generatepress.com/article/building-simple-mega-menu/

[Matthias]

The grandchild-items are now visible again, but the links are not “clickable”: when I hover over the grandchild items, the state of the child-item changes (in Chrome and Firefox).

[Tom]

Ahh, can you try the updated CSS now?: https://docs.generatepress.com/article/building-simple-mega-menu/

Thanks for your help with this 🙂

[Matthias]

Desktop works fine now, thank you!

On mobile there are 2 issues:

1. When opening the menu, it looks like the child-menu items are expanded by default without actually showing the grandchild-items.
2. Hovering over the grandchild-items and trying to select one, makes all the items flicker (child + grandchild).

I hope you see the same, if not I can make a short video.

[Tom]

And if you remove the mega menu CSS, it goes back to normal?

[Matthias]

Yes, when I remove the mega menu code the menu works perfect, both on desktop as well as on mobile.

I think I found a solution for the first issue from the ones I mentioned:

1. When opening the menu, it looks like the child-menu items are expanded by default without actually showing the grandchild-items.
2. Hovering over the grandchild-items and trying to select one, makes all the items flicker (child + grandchild).

In the mobile.css file of the GP theme, on line 49 there’s this rule:

.main-navigation.toggled ul ul,
.secondary-navigation.toggled ul ul {
	visibility: hidden;
}

Adding this to my child theme’s stylesheet solved issue #1:

.main-navigation.toggled ul ul,
.secondary-navigation.toggled ul ul {
	display: none;
}

What I haven’t been able to solve yet is the flickering of the grandchild menu’s when hovering over the child menu.

When I remove the mega-menu code the mobile menu works as expected, so it looks like the problem is in the mega menu code block.

Do you see the same on your installation?

[Tom]

Think I got it fixed – can you try the updated code?

[Matthias]

Yes, fixed! Thank you so much for your help even in the weekend.

[Tom]

No problem! Thanks for helping me make sure the code is all working again 🙂

[Leon]

Hi Tom,

I was searching for making a mega menu as I want to list a bunch of links to the primary nav. I tried your code as in this link: https://docs.generatepress.com/article/building-simple-mega-menu/

It will show 4 columns of child menu.

Is there a way to show the child menu vertically floating to the left and grand child menu items horizontally? Like in this picture.

I think this way it’s easier to navigate. Because have about 27 grand child menu items which are too hard to display vertically. If they can display horizontally and float left, then they can make us the width to the maximum.

Thank you
Leon

[Tom]

Hi Leon,

I think this would likely take some considerable CSS, and maybe even a custom walker for the menu. You might be better off with a more advanced solution like Uber Menu.

[Leon]

Hi Tom,

Thank you. I’ll try uber menu and see if I can get it work the way I want.

Thanks
Leon

[Tom]

Couple more tweaks to the code so it works nicely with 2.0.1: https://docs.generatepress.com/article/building-simple-mega-menu/

[Leon]

Hi Tom,

Thanks for the update. I bought uber menu that day. Took 2 days to get it work the way I want. There are a Bunch of configurations to do. Feel like it is not as easy to customize as GP theme and plugins. But their support is also quick.

Thank you very much. Every time I ask something, I get it done with your help.

Leon

[Author]

Posts