How To Set An Auto Adjusting Divi Menu Dropdown Width Tutorial by Pee Aye Creative

How To Set An Auto-Adjusting Divi Menu Dropdown Width

Nelson Miller Pee Aye Creative
In this tutorial I will show you how to set an auto-adjusting Divi dropdown menu width for the Divi menu module.

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

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.

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Please share this post!

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

20 Comments

  1. Dax Davis

    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?

    Reply
      • reed

        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.

      • Dax Davis

        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.

      • Dax Davis

        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.

      • Hemant Gaba

        I’m glad the issue is resolved. Thanks for sharing the solution.

  2. Ralf Krieger

    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

    Reply
      • Ralf krieger

        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?

      • Krieger Ralf

        You should see it now on the website….

      • Dax Davis

        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.

      • Hemant Gaba

        Hi Everyone!

        I have updated the code above. Please use the new one and see if it helps!

      • Ralf Krieger

        Perfect!!! Problem solved with your new code! THX
        Ralf ;-))

  3. Neil Forrester

    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 🙂

    Reply
  4. Gui

    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;
    }
    }“`

    Reply
  5. Lilah

    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?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      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.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart