Divi Tutorial – Make your own custom megamenu

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: //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

//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

Why no ads?

Hi, my name is PK, and welcome to my website, almost inevitable design. I maintain and publish on this site for two reasons.

  1. To give back to the community. I learned so much from people's tutorials and StackOverflow that I wanted to contribute and help others.
  2. To provide a more structured learning experience. People struggle to find the course that guides them from start to finish, based off of real life experience, and my courses provide that.

The only "ads" I have here are for my own courses, and maybe an affiliate link, but that's it. They fund the website resources and provide more motivation for me to product better content.

Any bit of interest helps. Even sharing with your feidns, suggesting my courses to your developer or designer, or subscribing to my YT channel, or joining our Discord. Thanks and I'll see you around!

The Web Design Space

TWDS is my web design agency. If you're looking for premium quality, reliable, web design and development, come see what we're about!
Learn More
Choose "Paythen" at checkout for an interest free 10 week payment plan.
Leave a Reply

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

  1. This looks very interesting! I would like to use it for my main menu so it shows my links on mobile, too. All I need on mobile are the main menu links. So how would I add some stuff to the panel along with my main menu, for example, header labels above each of the columns of the menu? And perhaps below the main menu a row of social media icons? Is this possible?

    I am into Divi for about 2 months so there is still a lot I have to learn! Thank you!

    • I will give it a try after going over your instructions more thoroughly and report back if I’m still stuck. So don’t go to any trouble yet. Thanks!

  2. Hello PK,

    Great tutorial mate!
    Continue with what you are doing now because you are on the right track.

    Bye

    • Thanks Dragos!

  3. I can’t seem to list the shortcodes in library. Are you using sorcery?

      • Hi,

        Thanks for this tutorial – however I have the same problem as drew. I’ve installed the child theme but the shortcodes item does not appear on the Menu page?

        • My apologies – I’ve found it. It was in Screen Options

          • Hi Richard, Glad you sorted it out. Thanks for the update!

  4. Thanks! Hope you put it to good use!

  5. Cool trick! Thank you, PK!

New tutorials