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.
- 1) Widgets in Menu for WordPress
- 2) DIVI WIDGET BUILDER ($5) or PBE ($14)
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
CSS Snippet
/***Main css****/
.nav li ul {
position: fixed;
width: 100%;
left: 0px;
}
.menu-item-type-yawp_wim {
width: 100%;
min-width: 100%;
position: relative;
}
.menu-item-type-yawp_wim a {
all: unset!important;
}Now let’s add some CSS to style the mega menu on mobile
CSS Snippet
/***Mobile css****/
#main-header .et_mobile_menu li ul{
padding-left:0px!important;
margin-left:-10%!important;
width: calc(100% + 14%)!important;
}
#main-header .et_mobile_menu li .et_pb_column{
width:50%!important;
float:left!important;
}
.et_mobile_menu {
width:125%;
margin-left: -12.5%;
}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’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.