Select Page

Divi Builder Mega Menu


So over the last few years, I’ve seen this question asked time and time again, even more after the Extra theme was released, how to achieve that type of mega menu, This tutorial is going to cost you about $5 due to the one plugin we need for this effect.

FYI: you can achieve this menu for free using this concept. click here.

For this tutorial, we are going to need these 2 plugins.

I assume you know how to install plugins if not here a video

Ok so once you’ve installed those plugins, we will create our drop down menu layout by creating a page and pretty much building the layout we want to display for our demo site our drop-down consist of a few slider and a text module.

Once you’ve created the drop down menu layout you want, be sure to save the layout to the Divi library.

Then we are going to head to the widget section, you can find it in the appearance submenu.

You will notice a widget area called “Widgets In Menu” this is where we are going to add our layout to, so now look on the left for a widget called “Divi Layout”, now click on the select box and select your layout and make sure that display title is not ticked.

Now head to menu, it also found under the Appearance tab. On the right where you add menu items, from pages etc there should be a new option called “Widgets”.

If you don’t see the option, click screen option in the top right corner, under the title boxes there is a check box which says widgets. turn this on by ticking it.

If you see the menu option now to add widgets to your menu, click on that box a select the Divi layout you want to use, now add it to your menu and to one of your top level menu items, move it to right slightly until you see an outline that represents it being a submenu item. Now click save.

Now open your site up and go take a look, now your will see your layout displaying but it does not look quite right yet, we need to apply some styling to the sub menu, to display it properly.

So first let’s add CSS to style our menu for Desktop computers

Now let’s add some CSS to style the mega menu on mobile

One last thing to consider for mobile having this mega menu can be quite bulky on Mobile, so maybe add the code from this Elegant Theme tutorial to make the mobile submenu items collapsible, just know the only issue with using this collapsible tutorial is that the parent menu item becomes unclickable.

I hope you find this tutorial useful, I would love to see the mega menu you guys come up with using this tutorial.

1 Comment

  1. Russ
    • Facebook
    • Twitter
    • LinkedIn
    • Google+
    • Buffer
    • Pinterest
    • reddit
    • StumbleUpon

    I’m really interested to try this out. However, it looks like access to the divi.space website is protected with a username and password. I can’t access any of the pages on the site.

    Reply

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Why use The Divi Framework.


Divi is a leading WordPress theme which powers almost 2 million websites around the world, Divi makes building a website super simple as it has one of the most powerful drag and drop builders for WordPress.

We've been using Divi since December 2013 to help speed up client projects, it has made our workflow 1000% times better and has saved us countless hour everyday.

Divi Stride is a Divi Third Party developer, we spend countless hours building tools and resources for the Divi Community.

We are the creators of Section Style Manager (the 5th Divi Plugin to be released), Divi Commerce & Tighten.

| 8 minutes

Pin It on Pinterest

Share This

Share this post with your friends!

No products in the cart.