[Resolved] Simple Mega Menu is buggy, needs some JS to work properly

[Mark]

Hi, if you test the Simple Mega Menu (a GP CSS creation), it seems to have a bug on tablets (real tablets, not a tablet as simulated by DevTools). Check out my site on a tablet. The menus come down, then persist even when you hit the next parent menu item, leading to overlaid menus. Messy.

Is there a way to stop this?

It works fine on desktop, btw.

Edit: does not work fine on any platform, see below.

[Leo]

Hi there,

Sorry I’m not sure what you meany by real tablets?

I just used the Chrome simulator and not seeing anything obvious.

Can you provide a screenshot by any chance? You can use a service like this:
https://postimages.org/

Let me know 🙂

[Mark]

Sorry I’m not sure what you meany by real tablets?

Er, I mean a real tablet, not a simulator.

I’ve outlined the overlap. This occurs after tapping the parent menus consecutively. The menus are not clearing when the next menu item is tapped. It’s almost as if they are going into a ‘hover’ state and staying that way. CSS needs to make ‘display: none’ (or something) for all other menu items when a parent item is clicked. I suppose you’d need javascript for that ….

[Mark]

Whoa!

I’ve recreated this bug on the desktop by clicking the parent item to open the submenu, then going to HOVER over another parent item. You then have screen with overlapping menus. Try it.

I think this is why the real Mega Menu uses JS to work properly

Can I fix this by forcing a hamburger off canvas menu onto tablets? If so, how?

[David]

Hi there,

yeah it is a known bug, which we are looking at solutions for – and yes it us where a JS method works best.

You can increase the Mobile Menu Breakpoint in Customizer > Layout > Primary Navigation.

[Mark]

Thanks David, set the breakpoint to 1000px and now I get a hamburger on the tablet in portrait mode at least.

Can’t decide whether to stay with the buggy menu, which is kinda good enough but not very professional, or lard up my site with a jQuery-heavy menu solution.

What would you do?

[David]

Personally i would limit the use of a Mega Menu only where it is truly required – but then i am old and easily disoriented with too many choices lol

If the Mega Menu is super important then i would go for a Plugin.

[Mark]

Hey David, I’m over 60 myself, a COBOL programmer from the 1970s, so I know the feeling.

Your comment sparked an idea though. What about doing something unusual, like having just a simple one level menu of a couple of items as the primary menu, and hiding the numerous choices (which we have to have somewhere) on an off-canvas hamburger, even on desktop?

As described here:
https://generatepress.com/forums/topic/thoughts-on-creating-this-custom-header/

This overcomes the flaws of Simple Mega Menu by not displaying them, cleans up the interface, and avoids a jQuery menu.

No?

[Mark]

Anyhoo, I went ahead and made a small (2 item), single-level primary menu for on-canvas display, and put the large parent→child menu off canvas on desktop, tablet and mobile. Seems to be a solution to this bug, of sorts.

Even better would be for the team at GP to write a little vanilla JS to make the “Simple Mega Menu” work properly. How about it guys?

I’ll mark this as “resolved” although there are issues here that need attention …..

[David]

Awesome – great idea
The issue with sub menus staying open should be resolved in GeneratePress 2.5 🙂

[Mark]

Thanks Dave, I’ll keep an eye out for that

[David]

You’re welcome

[Mark]

The issue with sub menus staying open should be resolved in GeneratePress 2.5

David, do you have any notion of when there will be new releases of GP and GP Premium?

[David]

I would reckon Alpha/Beta would be the beginning of July. It’s quite a significant update so will require a healthy testing phase

You can grab the latest JS from the 2.5 release here if you want:

https://github.com/tomusborne/generatepress/tree/release/2.5.0/assets/js

[Mark]

Thanks for the info, David. I look forward to the new software from GP. (I’ll leave the JS until then, just in case it does not sync with the old front end.)

[Author]

Posts