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.
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 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.
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 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.
Just an FYI, I noticed you are having the same issue on this page: https://wordpress-292293-1617718.cloudwaysapps.com/product/divi-tabs-maker/. Oddly enough, the problem is not occurring on your blog or home pages.
I’m glad the issue is resolved. Thanks for sharing the solution.
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.
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?
You should see it now on the website….
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.
Hi Everyone!
I have updated the code above. Please use the new one and see if it helps!
Perfect!!! Problem solved with your new code! THX
Ralf ;-))
Hi Nelson, Thanks for another great tutorial. I have been approaching this using specific widths but I’ll be using this more flexible approach in future. Great job and thank you 🙂
You’re welcome, glad you found this approach interesting as I did too!
This CSS will break mega-menus. Here’s a fix for the mega-menus :
“`/*set the Divi menu dropdown auto width*/
@media only screen and (min-width: 981px) {
.nav>li:not(.mega-menu) ul {
width: fit-content;
display: flex;
flex-direction: column;
}
.nav>li:not(.mega-menu) li {
white-space: nowrap;
}
.nav>li:not(.mega-menu) li a {
width: auto !important;
}
}“`
Thanks for sharing!
I’m having the same issues as the other commenters where the background width of fit-content isn’t being recognized. There’s a 240px width with an important tag overwriting it for me. Any ideas on how to fix it?
Hi Lilah,
I am not sure what you mean, as the only other commenter with this issue had CSS overriding it, which is exactly what it sounds like if you are seeing 240px with important, that is not from Divi or us, so you would have to remove that other code from your custom CSS.
Thanks Nelson. This is great.
Do you know how to have this ONLY affect the dropdown for the primary menu? On my site, I have a “buy it now” button with a dropdown menu, and this code is also affecting that.
My site’s in progress, but if you look at the link, you’ll see “comics galleries” at the top of the page, which is in the Primary menu. I want this code to work only for that, but can’t figure it out.
If you scroll down just a little, you’ll see a “buy it now” with a nested dropdown, and this code is also affecting that and conflicting with some sizing of image icons.
https://matthollingsworth2.mystagingwebsite.com/seven-to-eternity/
Your tutorials are great. Thanks!
Hi Matt,
Sure with any tutorial, you can make it specific by using a custom CSS class. In this case, you can place the CSS class in the WordPress menu item (you may need to enable that in the “Screen Options” first) and then use that same selector in the code.
Thanks, Nelson.
I’m having a helluva time with this. I tried assigning custom css classes to both the dropdown in my primary menu, and that “buy it now” menu, but can’t get it to work.
I tried changing the .nav to the new custom css class with no effect. It seems I’m not understanding correctly after doing a ton of reading and trying things out.
So, the custom css I put in the dropdown up in the primary is “comics-galleries-menu.” And, for instance, in your code, I changed .nav to match that, like so:
@media only screen and (min-width: 981px) {
.comics-galleries-menu li ul {
width: fit-content;
display: flex;
flex-direction: column;
}
.comics-galleries-menu li li {
white-space: nowrap;
}
.comics-galleries-menu li li a {
width: auto !important;
}
}
This has no effect on the menu at all. Conversely, if I put the custom css class for the “buy it now” menu, it DOES affect the “buy it now” menu.
When I inspect the menu item up in the primary menu (the one that now has the custom css class of “.comics-galleries-menu”), and I scroll up a little, I see:
I’m a total noob, so I’m sorry if this all sounds super ignorant. But it looks like that’s a navigational css class, and that your code is using that “.nav” to implement this. Maybe that .nav is a css class for the contrainer holding that menu, and all menu items? When I inspect my “buy it now” menu, I don’t see any nav id, so I guess it uses the default navigational css class? I couldn’t find any way to add a custom nav id or nav class, so I’m probably totally wrong here.
I’m sorry to bother you, but I’ve been fiddling with this for hours with no luck. Any insights on how to go about implementing this only in that comics-galleries-menu, and NOT the buy-it-now-menu would be greatly appreciated, even if it’s a “go read this site, and it explains .nav” or whatever.
Thanks!
I found a solution. If I input the code below, it makes the text stay on one line for the dropdown, and it no longer conflicts and causes sizing problems with the “buy it now” dropdown on the page.
.nav a{
white-space: nowrap;
}
I checked it on mobile as well, and it looks good with no change on the mobile that I can see.
Anyway, thanks for the great tutorials, Nelson.