Divi Builder Mega Menu

1 Comments

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.

James Fosker

James is the Founder of Fosker Media and Divi Stride, when he not busy working with clients or building tools for the Divi Community he likes to travel and see the world.

D

Explore Divi, The Most Popular WordPress Theme In The World And The Ultimate Page Builder

A better Monarch social sharing bar

A better Monarch social sharing bar

Over the last few months across a bunch of sites I read articles on I’ve noticed that they had a really nice fixed social sharing bar at the bottom of their pages, because I really liked the style and have had a few clients lately who have wanted to focus on creating...

Creating a Clickable Slider

Creating a Clickable Slider

Over the last year I’ve seen quite a few Divi slides which had no button but in their graphics was a graphic button that said click here and there was nowhere for them to click, I’ve actually personally used this idea on this site to link to other Divi-related...

Grid post on non Divi pages

Grid post on non Divi pages

Divi allows us to create truly unique website and pretty decent blog pages but some stuff you can’t use the page builder on like category pages and the archive, the reason that this is a problem is because it leaves your website looking inconsistent, which is not very...

1 Comment

  1. Russ

    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.

Pin It on Pinterest