There are a few Divi mega menu plugins out there and they work nicely for the most part. But, they can be pricey and some are a bit bulky.
Using this method requires 2 things:
- Install the free “Shortcode in Menus” plugin for adding shortcodes to your menu.
- Add the function below to your child theme functions.php file.
The custom function does 2 things:
- Allows us to use a shortcode to display a Divi Layout anywhere we like. In this case we’re adding them to a mega menu, sub-menu item.
- Adds a “Module Shortcode”column in the Divi Library for each library item. It displays the shortcode you can copy/paste anywhere*.
STEPS
- Go to the Divi/Divi Library and make a layout for one of your mega menu dropdowns. You can make any layout you want and use any Divi module you like.
TIP: Remove all spacing in the section and rows as the mega menu will already have spacing by default. You may also want to use a custom Gutter width of 1 or 2 in your row settings. - Copy the shortcode for your Divi Library layout.
- Go to Appearance/Menus and add a top level menu item. Make sure to add the “mega-menu” class.
- Add a sub-menu to the above top level menu link using the Shortcode menu item. Paste your Divi Library shortcode in the description field.
TIP: If you want the top level menu links to have a different style than your mega menu links, use the CSS below to get you started and paste in the Divi theme options/Custom CSS area.
*ANOTHER TIP: You can paste the same shortcode inside of another Divi module. Like maybe an accordion, blurb, or text module. Maybe even inside your sliders? Lots of possibilities!
That’s all!
Link to TXT file for easier copy/paste.
That’s a cool idea! Thanks for sharing. However, my text design in the section of my divi library changes into the same design as the text in the navigation bar as soon as I use an hyperlink. I can’t really style the drop down menu, only non hyperlink texts. Any suggestions?
It’s hard to say without knowing exactly what you’re doing. If you’re using a text module, did you try styling the links in the module settings by clicking the little link icon? That usually works.