Instead of having a long single column in a submenu, have a shorter submenu with multiple columns – that still works in mobile!
- Set Class as a visible box in your menu items:
go to Appearance > menus > top right corner, click ‘Screen Options’ and select CSS Class in Show advanced menu properties
- Add mega-menu to top level menu item:
You do not add this class to every item just the top level one.
So: if you have Home, About, Products – submenu items, product1, product2, product 3, product4,
you would just add it to Products
IT STILL DOESN’T WORK!
yes thats right, you need to go to step 3
- You need 2 levels of sub menu to set up the number of columns:
In this case: Home, About, Products – submenu items, A Page about These Products- submenu items: product1, product2, and A Page about Those Products- submenu items product 3, product4.
An Example of How to add Mega Menu to Divi Theme?
Look up to the menu above this page and mouseover Web Design. 3 columns, so i had 3 Sub menu items in my menu, each with a few pages underneath. There are differnt things you can do to style them – this page about styling divi mega menu might help.