0131 478 2702

Instead of having a long single column in a submenu, have a shorter submenu with multiple columns – that still works in mobile!

  1. 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
  2. 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
  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.