Menu Column Bug Chrome/Firefox

Hi Calvin,

I see you have this custom CSS:

@media only screen and (min-width: 781px) {
  #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 li#mega-menu-item-40467 > ul.mega-sub-menu {
    columns: 4;
  }
}

It is that which I suspect is not working in FireFox. It is possible that FireFox does not support “columns”.

Regards,
Tom

Hi Calvin,

That bit of code is specifically for 3rd level items within mega menus, but your sub menu is a flyout menu. I think the documentation has probably been updated since you copied the CSS, here is how it looks now:

https://www.megamenu.com/documentation/how-to-distribute-sub-menu-items-over-multiple-columns/

For your situation you would need to convert your sub menu to a mega menu and then you can use the mega menu builder to display your items in 4 columns:

https://www.megamenu.com/documentation/mega-menus/

Regards,
Tom

Hi calvin,

Nope, it’s all in the free version.

If you go to Appearance > Menus. Hover over the “Destinations” menu item. Do you see a blue “Mega Menu” button?

Hi Calvin,

In general I would advise the grid layout as it provides a lot more flexibility in laying out your sub menu.

But for you, as you have so many sub menu items, the standard layout is probably best as it will automatically organise your menu items into columns (rather than you having to drag them into place manually).

Hi Calvin,

You would need to duplicate the menu so you have 2 separate menus in order to have them display differently depending on their location.

Regards,
Tom