Divi Tutorial – Make your own custom megamenu

Have you tried to add a mega menu to Divi? Not very fun, eh?

Well, there’s this to start with: https://www.elegantthemes.com/blog/divi-resources/adding-images-to-your-divi-mega-menu

It’s sort of like a mega menu.. but doesn’t give you enough creative freedom.

So.. we go on to another method.

The video

Details

We need two things to get this done.

ONE. This child theme

This child theme allows you to take layouts in the Divi library and use them as shortcodes everywhere.

TWO. This plugin

https://wordpress.org/plugins/shortcode-in-menus/

How to put them all together

First, go to Divi > Divi Library and make a layout or a section, or whatever you need.

Save it.

Now if you revisit Divi > Divi Library, you’ll find that there’s now a new shortcode for the layout. Copy that. You’ll need it later.

Next, go to Appearance > Menu and follow the instructions.

1. Open screen options (upper right hand corner of screen)
2. Check CSS classes in the panel you just opened.
3. Add a custom link menu item with # in the URL. Once added, open it to add “mega-menu” in the custom class.
4. Drop the shortcode into the content field in the “shortcode” menu box, and add that to menu.
5. Make sure that item is a submenu of the menu item you just made in step 3.

Save all that, and you’re done.

There you go. Mega menu.

Photo by Christelle BOURGEOIS on Unsplash