Create a Mega Menu With Divi

If you don’t know what Divi is, it’s a killer theme by Elegant Themes. It features an amazing page builder, complete with drag and drop functionality. You can literally make anything under the sun with the Divi WordPress theme. The problem is, sometimes you need a mega menu, but there isn’t an option available for you to choose from. I’ll show you how to create a mega menu in Divi in a matter of minutes.

Create a Mega Menu With Divi

The First Thing you’ll want to do is go to the menu section of WordPress. You’ll want to go up to screen options in the top right corner and make sure that CSS classes is checked. Then, when you click on a menu item, you can input classes to style your menu.

Set Up Your Menu

Create a Mega Menu With Divi - Order

You’ll want to create a dummy link as your first item. You simply click the custom link option on the right and use # as the link. Then, for every column in your mega menu, create a sub-menu item and then have additional sub menu items under that one. Each sub menu item will translate into a column, giving you control over the structure.

Screen Shot 2015-07-15 at 11.54.31 PM

In the css field for the first menu item, type in mega-menu. Adding this class changes the behavior of the entire navigation menu.

mega-menu-demo

Once you save the menu, you can load the page in another tab in your browser to try it out. It’s a good idea to test it out. What’s cool about this is that once you know how to do this, you begin to understand how to use classes with WordPress menus. It will help you to understand how to do other things, such as customizing certain menu items, calling more attention to them.

Conclusion

This is just a tip of the iceberg of what you can do with Divi. What baffles me is why this isn’t just an option in the customizer section of Divi. You can do other things with the menu in Divi, which includes centering a menu, and even switching to a vertical menu. Maybe this CSS class is to text it out as a feature for the next version release. Whatever the case may be, it’s incredibly easy to create a mega menu with Divi, one of the best drag and drop WordPress themes you’ll ever see.