A drop-down menu button divi can come in handy when designing a website. In addition to the main menu, some areas of a site may require a drop-down menu made up of sub-items. We see that they are used for things like blog post categories, lists, and form entries. But they can even be used for a call to action.
In this tutorial, we’ll show you how to create a drop-down menu button divi 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 this 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 divi.
What you need to get started drop-down menu button divi
To begin with, if you haven’t already done so, install and activate the installed Divi theme (or the Divi Builder plug-in if you are not using the Divi theme). We are going to use the Divi builder at the start 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 create a new menu link, entering a menu name, and clicking on the “Create menu” button.
For now, you can create custom links with “#” as a placeholder for the URL 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 make sure to save the menu.
How to create a drop-down menu button with Divi’s 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 the dummy content
First, add a row of one column to the default standard section.
Add a text module
Then add a text module to the line with the following content:
Then update the design parameters as follows:
Upholstery Section
Then update the section parameter with the following:
- Padding: 0px bottom
Line spacing and border
Once the section fill is updated, open the row settings and give it fill and light border.
- Padding: 10vw on top, 10vw on the bottom, 5vw on the left, 5vw on the right
- Border Width: 1px
Creating the drop-down menu button
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.
Added full-width menu
To create the full-width menu module, add a new full-width section below the current standard section.
Then add a full-width menu module to the row.
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’ll come back to this module in a bit to finish the design. But for now, we’ll 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:
- Background gradient left: # 0047d6
- Gradient bottom right Color: # 45b2ff
- Max width: 240px
- Alignment section: center
I set the maximum section width to 240px, as this matches the width of the default drop-down 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 dropdown above all other content on the page.
Design the Fullwidth menu
We are now ready to design the Fullwidth menu module. Open the fullwidth menu module settings and update the following:
- Create full-width menu links: YES
- Drop-down menu text color: #ffffff
- Mobile menu text color: #ffffff
- Text alignment: center
- Drop-down menu background-color: # 45b2ff
- Drop-down menu line color: #ffffff
- Mobile menu background-color: # 45b2ff
- Menu Font: Encode Without Semi Condensed
- Font menu Weight: Semi Fat
- Menu text color: #ffffff
- Menu text size: 16px
- Menu spacing: 2px
- Animating 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 hovering space does not yet occupy the entire button area and the drop-down menu is still on the right. To solve this problem, we can add custom CSS.
Read more: How to create a calculation table on Divi with jQuery
Adding custom CSS
Before adding the custom CSS, make sure you have added the CSS ID “drop-down button” 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.
Final 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 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.
For website maintenance service contact us.