Creating The Advanced Elegant Themes Dropdown Menu with Divi’s Theme Builder

Ever since Divi’s Theme Builder has come out, the way we design headers and footers throughout our websites with Divi has become easier than ever. Everything can be customized and you can obtain the exact menu you have in mind without ever having to leave the intuitive Divi environment. Now, at a certain point, you might have come across the Elegant Themes dropdown menu on our website. This dropdown menu is a more advanced type of mega menu that creatively combines icons, text and CTAs. This allows visitors to visually navigate through the different products that are provided. It also translates into a beautiful nested menu on smaller screen sizes.

In this tutorial, we’re going to show you how to recreate this advanced Elegant Themes dropdown menu inside Divi’s Theme Builder. We’ll combine the best of both worlds; we’ll use the built-in Divi elements to create the foundation of our dropdowns and combine it with some code that places the dropdowns inside the WordPress menu. You’ll be able to download the JSON file for free as well!

Let’s get to it.

Preview

Before we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.

Desktop

Mobile

Download The Advanced Elegant Themes Dropdown Menu Header Layout for FREE

To lay your hands on the free header layout, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our newsletter by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

Download the Files

Download For Free

Join the Divi Newsletter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

DOWNLOAD

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

How to Upload the JSON File

Unzip the zipped folder you were able to download above. Then, navigate to your WordPress website > Divi > Divi Library and upload the JSON.

Once your layout is saved in the Divi Library, you can navigate to the Divi Theme Builder and import the saved layout by clicking on ‘Add Global Header’ or ‘Add Custom Header’ and selecting ‘Build Global/Custom Header’. Go to the ‘Your Saved Layouts’ tab in the Divi Library, select the layout you’ve uploaded in the previous step and save all Divi Theme Builder Changes.

To have a functioning menu right off the bat, you’ll be required to go through the first part of this tutorial below; adding the CSS classes to menu items on an individual level. You’ll also need to enable one of the CSS classes inside the Code Module as is shown in part 5 of this tutorial.

1. Add CSS Classes to Menu Items

Go to Menus in Appearance

The first part of this tutorial focuses on setting up your WordPress menu items with the proper CSS classes. To do that, navigate to your WordPress dashboard > Menus > Create a new menu or open an existing one.

Enable CSS Class Option

Then, in the top right corner of your screen, you’ll notice the ‘Screen Options’. Toggle this option and enable ‘CSS Classes’ in the advanced menu properties. This will allow us to add CSS classes to specific menu items on an individual level.

Add Consecutive CSS Classes to Menu Items That Need a Dropdown

Throughout this tutorial, we’ll create three different dropdowns and assign each one of them to a specific menu item. To get that process going, we’ll need to assign two different CSS classes to the three menu items we want to contain a dropdown menu.

• First menu item you want to assign a dropdown to: first-level first-level-1
• Second menu item you want to assign a dropdown to: first-level first-level-2
• Third menu item you want to assign a dropdown to: first-level first-level-3

2. Create Custom Header with Divi’s Theme Builder

Go to Divi Theme Builder

Once the menu item CSS classes are in place, it’s time to switch over to Divi. Go to the Divi Theme Builder and select ‘Add Global/Custom Header’.

Start Building Global Header

Then, select ‘Build Global Header’ to be redirected to the template editor.

Section Settings

Background Color

Inside the template, you’ll notice a section. Open that section and change the background color.

• Background Color: #ffffff

Spacing

Remove all default top and bottom section padding next.

• Top Padding: 0px
• Bottom Padding: 0px

Box Shadow

And include a subtle box shadow as well.

• Box Shadow Vertical Position: 0px
• Box Shadow Blur Strength: 30px
• Shadow Color: rgba(103,151,255,0.17)

Add New Row

Column Structure

Continue by adding a first row to the section using the following column structure:

Sizing

Without adding any modules yet, open the row settings and modify the sizing settings as follows:

• Use Custom Gutter Width: Yes
• Gutter Width: 1
• Max Width: 1440px

Spacing

Change the top and bottom padding values in the spacing settings next.

• Top Padding: 10px
• Bottom Padding: 10px

Add Menu Module to Row

Select Menu

Then, add a Menu Module to your row’s column and select the WordPress menu you’ve modified in the first part of this tutorial.

Upload Logo

Upload a logo next.

Menu Text Settings

Move on to the design tab and change the menu text settings accordingly:

• Menu Font: Lato
• Menu Font Weight: Bold
• Menu Font Style: Uppercase
• Menu Text Color: rgba(32,41,47,0.62)
• Menu Text Size: 13px
• Menu Letter Spacing: 3px
• Text Alignment: Right

Dropdown Menu Settings

Make some changes to the dropdown menu settings next.

• Dropdown Menu Background Color: #ffffff
• Dropdown Menu Line Color: rgba(0,0,0,0)
• Dropdown Menu Text Color: #000000
• Mobile Menu Background Color: #f2f4f5
• Mobile Menu Text Color: #000000

Icon Settings

As well as the icons settings.

• Shopping Cart Icon Color: #000000
• Search Icon Color: #000000
• Hamburger Menu Icon Color: #ff4a9e

Sizing

And complete the module settings by assigning a logo max height to the sizing settings.

• Logo Max Height: 64px

3. Create Dropdown Elements

Add New Row to Section

Column Structure (Matching Number of Dropdown Menus Needed)

Once your default menu is in place, it’s time to create the dropdown menus. To do that, we’ll add a new row containing three equally-sized columns. The number of columns matches the number of dropdown menus we’ll create.

Sizing

Without adding any modules yet, open the row settings and modify the sizing settings accordingly:

• Use Custom Gutter Width: Yes
• Gutter Width: 1
• Width: 86%
• Max Width: None

Spacing

Remove all default top and bottom padding next.

• Top Padding: 0px
• Bottom Padding: 0px

CSS Class

And assign a CSS class to the row.

• CSS Class: dropdown-menu-row

All Column CSS Classes

Once you’ve completed the general row settings, open each column individually and assign the following CSS class:

• CSS Class: dropdown-menu-column

Add Blurb Module #1 to Column 1

Add Content

Time to add modules! We’ll start by creating the first dropdown menu in the first column. To display all different products, we’ll use Divi’s Blurb Module. Add some content of your choice.

Select Icon

Then, select a matching icon.

Add Link

Add a link to the module too.

Icon Settings

Move on to the design tab and style the icon settings as follows:

• Icon Color: #8f42ec
• Image/Icon Placement: Left
• Use Icon Font Size: Yes
• Icon Font Size: 30px

Title Text Settings

Then, style the title text.

• Title Font: Lato
• Title Font Weight: Bold
• Title Font Style: Uppercase
• Title Text Color: #8f42ec
• Title Text Size: 16px
• Title Letter Spacing: 2px

Body Text Settings

Along with the body text.

• Body Font: Lato
• Body Text Color: #999999

Sizing

We’re making sure the content width is ‘100%’ too.

• Content Width: 100%

Spacing

Then, we’ll go to the spacing settings and use some different padding values across different screen sizes.

• Top Padding: 15px
• Bottom Padding: 15px
• Left Padding: 6% (Desktop), 2% (Tablet), 3% (Phone)
• Right Padding: 6% (Desktop), 2% (Tablet), 3% (Phone)

Hover:

• Top Padding: 15px
• Bottom Padding: 15px
• Left Padding: 8%
• Right Padding: 4%

Animations

We’ll remove the default icon animation in the animation settings next.

• Image/Icon Animation: No Animation

CSS Class

Then, we’ll move on to the advanced tab and assign a CSS class to our module. Each and every module in your dropdown menu needs the same CSS class assigned to it to be included in the dropdown.

• CSS Class: dropdown-menu-item

Main Element CSS

Last but not least, we’ll complete the module settings by changing the cursor using one line of CSS code in the main element.

cursor: pointer;

Clone Blurb Module x3

Once you’ve completed the first Blurb Module, clone it three times.

Change Content & Icons

Modify all content and icons for each duplicate.

Change Links

Along with the links.

Clone Last Blurb Module Once

Continue by cloning the last Blurb Module in the column once.

Add Background Color

Open the duplicate Blurb Module’s settings and change the background color.

• Background Color: #f9f9f9

Change Icon Settings

Modify the icon settings too.

• Icon Color: #3b45eb
• Icon Font Size: 22px

Change Title Text Settings

Along with the title text settings.

• Title Text Color: #3b45eb
• Title Text Size: 14px

Change Content & Link

And, of course, the content and link.

Disable on Tablet & Phone

The second type of Blurb Module we have in this dropdown will only be visible on larger screen sizes. This will help us ensure that the dropdown menu doesn’t get too overwhelming on smaller screen sizes. To do hide the module on smaller screen sizes, go to the advanced tab and disable the module on tablet and phone.

Clone Blurb Module x3

Once your second type of Blurb Module is completed, you can clone it three times.

Change Content & Icons

Make sure you change the content and icons for each duplicate.

Change Links

Along with the links.

Add Text Module to Column 1

Add Content

The last module we need in our dropdown menu is a Text Module. We’re using a Text Module instead of a Button Module because the Text Module will more easily adapt to the dropdown environment. Add some copy of your choice.

Background Color

Then, change the background color.

• Background Color: #3776ff

Text Settings

Move on to the design tab and modify the text settings accordingly:

• Text Font: Lato
• Text Font Weight: Bold
• Text Font Style: Uppercase
• Text Color: #ffffff
• Text Letter Spacing: 3px
• Text Alignment: Center

Spacing

Add some custom spacing values too.

• Top Margin: 20px
• Bottom Margin: 20px
• Left Margin: 4%
• Right Margin: 4%
• Top Padding: 15px
• Bottom Padding: 15px

Border

Then, add rounded corners to the border settings.

• All Corners: 100px

Box Shadow

Enable a subtle box shadow.

• Box Shadow Vertical Position: 14px
• Shadow Color: rgba(0,0,0,0) (Default), rgba(0,0,0,0.09) (Hover)

Transform Translate

On hover, we want the button to slightly go up. To add that effect, we’ll use some custom transform translate settings on hover.

• Right: -3px (Hover)

CSS Class

Like all other modules in our dropdown, this module needs the following CSS class:

• CSS Class: dropdown-menu-item

Main Element CSS

And we’ll complete the module settings by changing the cursor using one line of CSS code in the main element.

cursor: pointer;

Delete Column 2 & 3

Once you’ve completed the first dropdown menu column, you can open the row settings and remove the two empty columns in the row.

Clone First Column Twice

Clone the first column twice.

Customize Items

And customize all items in the two other dropdown menus however you like.

4. Add CSS & JQuery Code

Add New Code Module to Row #1 Column

Now that we have all the dropdown menu items in place, it’s time to turn them into a dropdown menu and place the dropdown menu inside a matching menu item. Add a Code Module to your first row, right below the Menu Module.

Insert CSS Code

And insert the following CSS code:

<style>
  
/* Enable class below once you're done editing the menu */
  
/*
.dropdown-menu-row {
display: none;
}*/
  
</style>
<style>
  
.et_pb_menu__menu [class*="dropdown-menu-container"] {
position: absolute;
top: 75px;
left: -195px;
background-color: white;
width: 464px;
-webkit-box-shadow: 1px 2px 44px 0px rgba(84,81,179,0.36);
-moz-box-shadow: 1px 2px 44px 0px rgba(84,81,179,0.36);
box-shadow: 1px 2px 44px 0px rgba(84,81,179,0.36);
border-radius: 20px;
padding-top: 20px;
padding-bottom: 5px;
visibility: hidden;
opacity: 0;
-webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
-moz-transition: 300ms all cubic-bezier(.4,0,.2,1);   
-o-transition: 300ms all cubic-bezier(.4,0,.2,1); 
-ms-transition: 300ms all cubic-bezier(.4,0,.2,1);   
transition: 300ms all cubic-bezier(.4,0,.2,1);     
}
  
.et_pb_menu__menu ul>li:hover [class*="dropdown-menu-container"] {
visibility: visible;
opacity: 1;
}
  
.et_pb_menu__menu [class*="dropdown-menu-container"]:before  {
position: absolute;
left: 195px;
top: -20px;
width: 0;
height: 0;
content: '';
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid white;
}    
.et_mobile_menu [class*="dropdown-menu-container"] {
background-color: white; 
padding-top: 25px;
padding-bottom: 5px;
}   
.et_mobile_menu li > a {
background-color: transparent;
position: relative;
}
  
.et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '\4c';
color: #FF4A9E;
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
  
.et_mobile_menu .first-level > .icon-switch:after{
content: '\21';
color: #c9c9c9;
}
  
.et_mobile_menu [class*="dropdown-menu-container"] {
display: none;
}
  
.et_mobile_menu [class*="dropdown-menu-container"].reveal-items {
display: block;
}
  
.et_mobile_menu {
width: 130%;
margin-left: -15% !important;
min-height: 100vh;
}
</style>

Insert JQuery Code

We’re using some JQuery code as well. Make sure you place this code between script tags as you can see in the print screen below.

jQuery(function($){
$(document).ready(function(){
  
$('.dropdown-menu-column').each(function(i){
  
i = i + 1;
  
var $dropdownMenuItems = $(this).find('.dropdown-menu-item');
var $mainMenuItem = $('.first-level-' + i + '>a');
$dropdownMenuItems.wrapAll('<div class="dropdown-menu-container-' + i + '" />');
var $dropdownContainer = $('.dropdown-menu-container-' + i);
$dropdownContainer.insertAfter($mainMenuItem);
  
});
var $firstLevel = $('.et_mobile_menu .first-level > a');
var $allDropdowns = $('.et_mobile_menu [class*="dropdown-menu-container"]');
$firstLevel.off('click').click(function() {
$(this).attr('href', '#');  
var $thisDropdown = $(this).siblings(); 
$thisDropdown.slideToggle();
$(this).toggleClass('icon-switch');
var dropdownSiblings = $allDropdowns.not($thisDropdown);   
dropdownSiblings.slideUp();
var $thisFirstLevel = $(this);
var $firstLevelSiblings = $firstLevel.not($thisFirstLevel);
$firstLevelSiblings.removeClass('icon-switch');  
});    
    
$(".dropdown-menu-row").css('visibility','hidden');
     
$(window).load(function() {
$(".dropdown-menu-row").fadeIn(1000);
});
  
});
});

5. Enable CSS Class Once You’re Done Customizing the Menu

As soon as you’re done customizing all the dropdown items, you’ll have one thing left to do: hiding the entire row containing the dropdown menu items. This, in combination with a load function inside our code, will prevent the dropdown menus from showing up when loading the page. Once you enable this CSS class, you won’t see the second row inside the Visual Builder anymore, but you’ll be able to access it in the wireframe mode and/or temporarily disable the CSS class when making changes to your dropdown menus. To enable the class, remove the ‘/* */’ brackets at the beginning and end of the CSS class.

• CSS Class: dropdown-menu-row

6. Creating More Than 3 Dropdown Menus

Add CSS Classes to Menu Items in Appearance

If you’re looking for a way to add more than 3 dropdown menus to your menu, you’ll need to navigate back to your menu and add consecutive CSS classes to the fourth menu item.

• Fourth menu item you want to assign a dropdown to: first-level first-level-4

Clone Column at End of Row

Then, go back to your header and clone the last column.

Make Sure Column & Module CSS Classes are in Place

Make sure the column and module CSS classes are in place for the new dropdown menu and you’re done! It’s important to always dedicate a new column to a new dropdown menu and to follow the column order of the row. This means that column 1 will be dropdown 1, column 2 will be dropdown 2, etc.

• Column CSS Class: dropdown-menu-column
• Module CSS Class: dropdown-menu-item

Preview

Now that we’ve gone through all the steps, let’s take a final look at the outcome across different screen sizes.

Desktop

Mobile

Final Thoughts

In this tutorial, we’ve shown you how to recreate the Elegant Themes dropdown menu using Divi’s Theme Builder. We’ve combined the best of both worlds and used Divi’s built-in elements to style all items in our dropdown menu, then used some code to place all dropdowns inside their matching menu item inside the WordPress menu. You were able to download the JSON file for free as well! If you have any questions or suggestions, feel free to leave a comment in the comment section below.

If you’re eager to learn more about Divi and get more Divi freebies, make sure you subscribe to our email newsletter and YouTube channel so you’ll always be one of the first people to know and get benefits from this free content.