[Resolved] Mini mega menu breaks to one column too soon

[mikeb82]

I use the Mini mega menu on a client site that has one dropdown (Manufacturers) that has enough items it extends off the screen in single column. The issue I’m seeing is that the Mini mega menu breaks to one column while there is still plenty of screen width to display the two columns. This happens at about 954 pixels.

Is there a way to make the Mini mega menu stay at 2 columns until the mobile menu kicks in at 768 pixels?

[David]

Hi there,

so you have two menus set up for that mini mega menu.
Each one is using one or two of the hide-on-* classes.

Change the hide-on-* classes to:

1. For the Mobile Menu – change to: hide-on-tablet hide-on-desktop
2. For the Desktop Menu – change to: hide-on-mobile

[mikeb82]

Thanks David,

Where do I find the settings for the hide-on-* classes?

Never mind, I found it.

Thanks again,

Mike

[mikeb82]

Changing the hide-on setting prevents the Mini mega menu from breaking too soon, but now the alphabetized menu setup breaks as the right column merges into the left column when the display window size gets under 955 pixels.

I had added a 2nd Manufacturers menu item (Manufacturers.) and set it to Hide-on-desktop. This works well for displaying in alphabetical order on mobile. As mentioned above the 2 columns lose their order as the screen narrows so that they are no longer in alphabetical order. Is there a way to make the Mini mega menu just shift left as the screen size gets smaller, but not small enough to switch to mobile? the width of the Mini mega menu is just over 500 px, so there is plenty of room to display on a screen that’s still over 768 px.

[David]

What was the need for the 2 separate Menus ?

If you’re using the CSS provided here:

https://docs.generatepress.com/article/building-simple-mega-menu/

Then you simply need to change the 768px in the @media query to match your mobile breakpoint or greater.

[mikeb82]

The need for the 2nd “Manufacturers” menu item was so that the items would maintain their alphabetized order when the Mini mega menu changed from 2 columns to one column. This approach appears to be causing more problems than it solves, as the only time I need one column is when the menu changes to mobile mode.

I got rid of the 2nd “Manufacturers” item that was set to hide-on-desktop and removed the hide-on-mobile setting from the main navigation menu. The concept would work if the Mini mega menu dropdown could change position as the screen narrows before changing to the mobile menu.

I’ll need to install a Mega menu plugin if the client wants perfection for both the desktop and mobile menus. It’s a lot of trouble for just one sub-menu dropdown.

We can consider this issue closed.

Thanks for all your help!
Mike

[David]

Glad to hear that!

[Author]

Posts