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>General tab in the "Custom CSS" code area.
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.
This stopped working for Divi 5.10 it seems? The dropdown icon is now sometimes positioned over the text?
Any fix?
Hi Ernst!
I have checked and it seems to be working fine in Divi 5.10, can you please share the page URL to check further?
Thanks for this code. It worked until I got to the 3rd tier. There is a gap between the 2nd tier and the 3rd tier that the mouse can’t jump over.
Screenshot – https://www.awesomescreenshot.com/image/60795115?key=345eb086a4d5788415bb9d373ad6db3c
URL – https://www.kingstonwritersfest.ca/
How do I fix this?
I’m using this code on a couple of sites, and when dropdown menus have secondary dropdown menus:
(1) The dropdown arrow next to the longest nav menu item in the primary dropdown gets hidden behind the text, and
(2) There’s a gap between the primary and secondary dropdown menus.
Would you be willing to help me?
You’ll see it happen on the following sites:
— https://mifuzion.com/ — Hover over “Emisoras” in the main nav, and you’ll see the dropdown arrow next to Nuevo Mexico is hidden behind the text, and you’ll see a gap between the primary and secondary dropdown menu.
— https://kvne.com/ — Hover over “Events,” and you’ll see the same type thing.
Hi Chad!
It seems you have added a custom ‘left’ value for the secondary submenu. Please remove the custom value or add the following code to override:
.nav li li ul{
left: 100% !important;
}
Hope it helps!
Hi Carol!
Please remove the following code:
.dd-menu .nav ul li.menu-item-has-children ul {
left: 240px;
}
And then add the following:
.dd-menu .nav ul li.menu-item-has-children ul li.menu-item-has-children ul{
left: 195px;
}
.dd-menu .nav ul li.menu-item-has-children ul{
left: 240px;
}
Hope it helps!
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
Hi Ralf,
Can you clarify what you mean? I do not see any issue.
Hi Sean!
Can you please try this code and see if it helps?
.et-menu li:not(.mega-menu) ul, #top-menu li:not(.mega-menu) ul,#top-menu li li, .et-menu li li {
width: fit-content !important;
}
Hi
Many thanks for post but I’m also getting the same issue where the background color of the drop down is smaller than the text, i.e. the text extends beyond the width of the background box. You can see the issue if you got to https://humanworkspace.wasabidesign.co.uk/what-we-do/manufacturing-infrastructure/ and click on ‘What we do’ …
Perfect!!! Problem solved with your new code! THX
Ralf ;-))
Hi Everyone!
I have updated the code above. Please use the new one and see if it helps!
It looks like his issue is the same as mine. When I look at his site, I see his menu items on one line extending beyond the dropdown’s bounding colors. I’m on a Mac with Chrome—the latest versions of both.
You should see it now on the website….
Hello Nelson and a happy new year to you and your family!
Its funny… I deleted all caches (at wp-rocket, and even on the hosting area at siteground… The backend shows the dropdown background beeing to short for long menu items. BUT on the frontend (live site) the css doesńt seem to work??? No idea what the reason is? Can I send you a login for my website?
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?
Hi Dax,
I am not sure about that issue, as it works fine for me. Can you share a link?
I’m glad the issue is resolved. Thanks for sharing the solution.
Just an FYI, I noticed you are having the same issue on this page: https://www.peeayecreative.com/product/divi-tabs-maker/. Oddly enough, the problem is not occurring on your blog or home pages.
I was able to fix it myself.
I had this CSS block that was overriding things.
#top-menu li li a {
padding: 6px 20px;
min-width: 200px;
}
I modified your CSS to this:
.nav li li a,
#top-menu li li a {
width: auto;
}
Now I just need to figure out the button padding.
Sure, check out https://hsmna.rubicontv.com/. There are menu items on each dropdown. On the dropdown for Membership, I’ve made one of the menu items a button, and I’ve noticed it does not have padding on the right. It’s probably the same issue as the others, but I’m unsure.
I also had the same issue, but if i copy/paste the code directly into the “advanced > css” inside the module itself. it fixes it. Is there a big reason why we should not do this? I tried both options #2 and #3 (child theme + theme options) but the same result occurred.