In this tutorial, we'll show you how to create a drop-down menu button using Divi's full-width menu module. To do this, we will first create a menu in WordPress. We will then use Divi's full width menu module to display that menu with custom styles using the Divi builder and a bit of custom CSS. The result is a practical and stylish drop-down menu button.
Let's start.
Preview
Here is an overview of the drop-down menu button that we will integrate into this tutorial.
What you need to get started
To get started, if you haven't already, install and activate the Divi theme installed (or the Divi Builder plugin if you are not using the Divi theme). We will use the Divi builder at the beginning to design the dropdown menu button.
That's it !
Create a menu in WordPress
Before we start creating the dropdown menu with Divi Builder, we first need to create a WordPress menu that we would like to use for the full width menu module. To do this, go to the WordPress dashboard and go to Appearance> Menus. Then create a new menu by clicking on the link create a new menu, entering a menu name and clicking on the “Create menu” button.
For now, you can create custom links with "#" as URL placeholder along with the link text.
Structure the menu items so that the top-level menu item has the "Learn More" link with three submenu items.
After that, be sure to save the menu.
How to create a drop-down menu button with the Divi full-width menu module
Once the menu has been created, we can start designing the drop-down menu button with Divi. To start the project, create a new page in WordPress and use Divi Builder to edit the page on the front-end (visual builder).
After that, you will have a blank canvas to start designing in Divi.
Create fake content
First, add a one column row to the default standard section.
Add a text module
Then add a text module to the line with the following content:
Divi Menu Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Then update the design parameters as follows:
Padding section
Then, update the section setting with the following items:
- Padding: 0px down
Line spacing and border
After the section fill is updated, open the line settings and assign it a fill and a slight border.
- Upholstery: 10vw at the top, 10vw at the bottom, 5vw at the left, 5vw at the right
- Width of the border: 1px
Creating the drop-down menu button
In order to create the drop down menu button, we will be using a full width menu module. This will allow us to add the menu created previously.
Adding the full width menu
To create the full-width menu module, add a new full-width section under the current standard section.
Then add a full-width menu module to the line.
In the full-width menu settings pop-up window (below Content), use the drop-down menu to select the menu you want to display. This should be the same menu we created earlier named “drop down button menu”.
Then, remove the default white background color for the menu.
Once you have added the menu with the fullwidth menu module, save the settings. We will come back to this module in a bit to finish the design. But for now, we're going to add a background to the full width section.
Update the design of the full width section
Open the settings for the full-width section and update the following:
- Left background gradient: # 0047d6
- Right background gradient Color: # 45b2ff
- Maximum width: 240px
- Section Alignment: center
I set the maximum section width to 240px, as this matches the width of the default dropdown menu width in Divi. It's also a good size for a button on desktop and mobile.
- Rounded corners: 5px
On the Advanced tab, add the following CSS Class, Overflow, and Z Index.
- CSS class: dropdown-button
- Horizontal overflow: visible
- Vertical overflow: visible
- Z index: 14
The CSS class is needed so that we can target our external CSS to this section later. The overflow needs to be set to visible so that we can see the drop-down menu. And the Z index will help you keep the drop down above all other content on the page.
Design the Fulwidth menu
We are now ready to design the Fulwidth menu module. Open the fullwidth menu module settings and update the following:
- Create full-width menu links: YES
- Dropdown text color: #ffffff
- Color of the mobile menu text: #ffffff
- Alignment of the text: center
- Background color of the drop-down menu: # 45b2ff
- Color of the drop-down menu line: #ffffff
- Menu background color: #45b2ff
- Font Menu: Encode Without Semi Condensed
- Font Menu Weight: Semi Bold
- Menu text color: #ffffff
- Menu text size: 16px
- Menu spacing: 2px
- Animation of the drop-down menu: Expand
Position the drop-down button
For the button to overlap the bottom border, we need to add a negative top margin that is exactly half the height of the button.
- Margin: -40.5px high
As you can see, the hover space does not yet take up the entire button area and the drop-down menu is still on the right. To solve this problem, we can add custom CSS.
Adding custom CSS
Before adding the custom CSS, make sure to add the CSS ID "drop down" to the full width section (not the module).
Without the CSS ID, the CSS below will not work.
To add the custom CSS, open the page settings and paste the following code into the custom CSS input box.
.dropdown-button .et_pb_fullwidth_menu .fullwidth-menu-nav> ul {padding-top: 0px! important; } .dropdown-button .fullwidth-menu li> a {padding-bottom: 0px; line-height: 81px; } .dropdown-button .fullwidth-menu li li a {padding: 6px 0px; line-height: 1.6em; } .dropdown-button .et_mobile_menu li a: hover, .nav ul li a: hover, .dropdown-button .fullwidth-menu a: hover {opacity: 1; } .dropdown-button .et_pb_fullwidth_menu_fullwidth .et_pb_row {padding: 0 0! important; } .dropdown-button .fullwidth-menu li {display: block; } .dropdown-button .fullwidth-menu .menu-item-has-children> a: first-child: after {right: 20px; }
Here is the final result
Latest Thoughts
Creating a drop-down menu button using Divi's full-width menu module involves a few key steps. First, we create the menu in WordPress that we want to integrate into the module. Then we use the Divi builder for and style the full width menu module to our liking. Then we add custom CSS to polish the design both on the desktop and on the mobile. The result is a beautiful (and useful) drop-down menu rolled out for desktop hover and mobile click. Hope you find this a useful addition to your design toolkit.
