How to make a Divi mega menu using Divi modules without buying a plugin.

May 17, 2021 | Divi Tips | 2 comments

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:

  1. Install the free “Shortcode in Menus” plugin for adding shortcodes to your menu.
  2. Add the function below to your child theme functions.php file.

The custom function does 2 things:

  1. 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.
  2. Adds a “Module Shortcode”column in the Divi Library for each library item. It displays the shortcode you can copy/paste anywhere*.

STEPS

  1. 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.
  2. Copy the shortcode for your Divi Library layout.
  3. Go to Appearance/Menus and add a top level menu item. Make sure to add the “mega-menu” class.
  4. 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.

Need help with this?
Hire me for a consultation and I'll walk you thru the process.

2 Comments

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

    Reply
    • 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.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

5 star reviews
"WOW! Money WELL spent. Joseph was incredibly knowledgeable in helping me make some final tweeks to my Divi website. He was very caring and went above and beyond. Will 100% use him for any future Divi website needs."
Claire - CMMC

5 star reviews
"You really get what you pay for with Joe. He does more than simply build a website, he sets up websites for success. Functional, clean, professional designs and he keeps up/implements the latest plugins and technology. Thank you Joe. I will continue to refer you work."
Mark Winger

5 star reviews
"The best WordPress guy I’ve worked with on WordPress, hands-down (and I’ve worked with dozens). Remarkably good with theme customizations with a quick turn. Kept it on budget as well. A rarity with hourly contracts."
Nate Wright

5 star reviews
"Thanks for your prompt reply. You’re always so comprehensive. If we could write another review just for your communication skills, then we would."
Alex N

More Tips

Looking for some deals?

Divi PHP Code Module

Ad - Web Hosting from SiteGround - Crafted for easy site management. Click to learn more.

Cloudways Hosting

WPEngine Hosting

Pressable Hosting

AccuWeb Hosting

Ask the Divi Guy a Question

"*" indicates required fields