Styling The Divi Submenu
Understanding The Divi Submenu Structure
As we continue our Divi Menu Module series, we are going to focus on the dropdown submenu for the next several tutorials. With this tutorial, you will be able to style and customize the Divi menu module dropdown submenu and change things like the colors, border, spacing, hover effects, and more!
▶️ Please watch the video above to get all the exciting details! 👆
Understanding The Divi Submenu Structure
First, we need to understand how the Divi submenu is made so we can target individual elements of it separately based on our design style. There are three parts that make up the Divi dropdown submenu:
- Unorderd List (The Submenu)
- List Items
- Links
Here is an example of how the default Divi dropdown menu looks:
Here is the behind-the-scenes structure of the submenu by default:
Notice anything? Each separate piece has it’s own properties, like padding and width. They are nested within each other, so in order to customize what we want, we first need to learn to target the correct piece of the structure.
It is important for you to understand the structure of the Divi submenu first before we start customizing it with CSS.
This tutorial will go over each part of the submenu separately, and you can follow along and use it as a guide for styling your Divi menu dropdown submenu!
How To Customize And Style The Divi Menu Dropdown Submenu
One of the first things we probably notice is the ugly blue thick like at the top of our submenu. Or maybe you want to remove some padding at the top or bottom or make it wider. You can do that by targeting the submenu unordered list as shown.
Edit The Overall Submenu
/*edit the Divi submenu*/
.et_pb_menu li ul {
YOUR CSS HERE
}
Once you have our CSS selector ready, you can start adding custom code where it says “YOUR CSS HERE.” (be sure to remove that text)
Custom Style Ideas
The following is a list of some ideas for things you might want to do to style the overall submenu. You can choose to do this by placing the snippets into the selector shown above.
Remove or adjust the spacing:
padding: 0!important;
Remove the default border at the top:
border-top: none;
Add a border:
border: 2px solid #2cba6c;
Change the background color:
background-color: #2cba6c;
Change the width:
width: 300px;
How To Customize And Style The Divi Menu Dropdown Submenu List Items
Now we move on to the list items. It can be confusing how the list items and the links relate, but if you take a close look at my suggested custom style ideas, you will start to see. The list items control the links items, but the next section of links controls the link text.
Edit The List Items
/*edit the Divi submenu list items*/
.et_pb_menu li li {
YOUR CSS HERE
}
Edit The List Items On Hover
/*edit the Divi submenu list items on hover*/
.et_pb_menu li li:hover {
YOUR CSS HERE
}
Once you have our CSS selector ready, you can start adding custom code where it says “YOUR CSS HERE.” (be sure to remove that text)
Custom Style Ideas
The following is a list of ideas of some things you might want to do to style the submenu list items. You can choose to do this by default, or on hover, by placing the snippets into the correct selector shown above.
Remove or adjust the spacing:
padding: 0;
Change the background color (for on hover):
background: #2cba6c;
Add a border on the bottom:
border-bottom: 1px solid #e1e1e1;
How To Customize And Style The Divi Menu Dropdown Submenu Links
The last section of the Divi dropdown submenu is the links themselves. The link text is great to style, and I have provided some ideas below like changing the color, size, spacing, or width. Another obvious one is the opacity, which changes to .7 by default on hover, but you can override that if you want.
Edit The Links
/*edit the Divi submenu links*/
.et_pb_menu li li a {
YOUR CSS HERE
}
Edit The Links On Hover
/*edit the Divi submenu links on hover*/
.et_pb_menu li li a:hover {
YOUR CSS HERE
}
Once you have our CSS selector ready, you can start adding custom code where it says “YOUR CSS HERE.” (be sure to remove that text)
Custom Style Ideas
The following is a list of ideas of some things you might want to do to style the submenu links. You can choose to do this by default, or on hover, by placing the snippets into the correct selector shown above.
Remove the spacing:
padding: 0;
Change the opacity (especially on hover):
opacity: 1;
Remove the slight background color (on hover):
background-color: rgba(0,0,0,0);
Change the width:
width: 240px;
Change the font size:
font-size: 12px!important;
Change the color:
color: #2cba6c;
Change the letter spacing:
letter-spacing: 2px;
The top of the submenu is cut off. Any idea how to solve this issue? Tried several options including customizing using the tutorial. Unfortunately nothing changes. Header is building using theme builder.
https://fairdinkumonline.nl/lavie/contact
Hi Anneloes,
The URL that you have shared is showing Coming Soon so can you please deactivate the coming soon plugin or the source from where it is coming so that I could investigate further?