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
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.