Automatic Dropdown Width
I recently noticed the text from my website dropdown menu was too long and causing an awkward overflow issue. I was going to solve it by setting a width for the dropdown menu, list item, and link, but that requires setting a fixed value, which is not ideal. Instead, I came up with a better solution that will adjust as needed. So in this tutorial, I will show you how to set an auto-adjusting Divi dropdown menu width for the Divi Menu module on desktop.
▶️ Please watch the video above to get all the exciting details! 👆
Add The CSS Snippet To Your Site
This is a very simple tutorial with only one step. You simply need to copy and paste the CSS snippet below into your website. The video above will give more details, but in general this snippet is targeting the menu dropdown container, the list items in the dropdown menu, and the links themselves in the list items. All three of these are necessary to target to get this to work properly, since by default they have a fixed value assigned to them. The code snippet overrides that fixed default value and makes it flexible instead to fix the content of your menu item text.
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
/*set the Divi menu dropdown auto width*/
@media only screen and (min-width: 981px) {
.nav li ul {
width: fit-content;
display: flex;
flex-direction: column;
}
.nav li li {
white-space: nowrap;
}
.nav li li a {
width: auto !important;
}
}The code is placed inside a media query, just to be sure to only target the desktop dropdown menu. We kept the selector generic, so there are no custom classes required – it simply uses the classes built into Divi. The code is pretty simple in what it is doing. It tells the submenu width to fit the content, which is the key here. The content in this case is the list items and list item links, which also have an auto width. So it all works together to create a flexible width dropdown menu in Divi.
Hi Nelson! Just tried the css code… but now the background color of the drop down is smaller than the text… What can I do? How can I adjust the size of the menu dropdown area? Please refer to my website: http://www.kriegerdesign.de-> offline design
THX
Ralf
Thanks for this; I’ve been dealing with the issue for a while.
One issue for me. The white background on my dropdown does not extend with the content. So, I have the end of the text of longer menu items floating over a transparent background.
Can you help me with this issue?