Still works in 2023
Keep your Divi menu from double stacking when you have a longer menu item. This short tutorial will show you how to add a little bit of CSS code to change the width of your Dropdown Menu in the Divi WordPress theme.
Copy this code to add to your CSS file. Instructions are in the video above.
.sub-menu li {
padding-left: 0px !important;
padding-right: 0px !important;
width: 100%;
}
.et-menu li li a {
width: 100%!important;
}
If that didn’t fix the problem for you, try this:
Option Two
- Open your menu module
- Click on Advanced Tab
- Click on Custom CSS
- In the Dropdown Menu Container area add the code seen below
- In the Dropdown Menu Links area add the code seen below
- Click save
Get a WordPress Website for $1/Day https://presshappi.com
*********************************************************************
SUBSCRIBE TO FOLLOW KORI – CLICK HERE
*********************************************************************
Video Transcript
– Hey, y’all. My name is Kori Ashton. Welcome to another WordPress Wednesday.
This is gonna be a short tutorial that will show you step by step, how to extend out the width of your Divi dropdown menu.
At times, if you have multiple words inside of your link options, it might stack causing a little bit of a difficult user experience. I’m gonna show you in this short tutorial, how to change that width, don’t be intimidated. It might be a little bit of CSS but I’ll show you how to copy and paste it, right in.
All right, let’s get to the tutorial. So this is the example that I was showing earlier. It is on Divi and I’ve got this very kind of long menu options that happen here. And most of them sit perfectly on one line. See how that looks. That looks really nice, but a couple of these unfortunately stack, and I don’t want them to, I want them to extend all the way across. So if that’s an issue that you’re battling with here’s the fix for it.
Here’s the Fix to Widen the Divi Dropdown Width
We’re gonna go into your dashboard and you could put this in two different places. If you wanted to, you can go into appearance and go to customize and you can drop this inside of your additional CSS block here. You might not have anything in here at all. It might be completely empty. If you do have some things in here you’ll wanna go all the way to the bottom, down to the very bottom, enter in. And what we’re gonna do is we’re gonna paste in this little bit of CSS.
Let me show you a zoomed in version of that code here, there you go
.Et-menu li li a and then an open curly bracket with 100%.
We’re gonna add in this important sign, just to be certain that it overrides anything else that we might have calling this menu to appear a certain way and then you’re going to end it. So I’ve got this code on the blog article linked below. So you can literally just copy and paste it in. So you don’t miss any of the spacing or any of the punctuation around it. It’s really important to grab that. You’re gonna copy that onto your clipboard, jump into your custom CSS box and just paste it right in there.
Go ahead and click, Publish. If you’re running on the Divi Builder for that menu you could also have dropped that inside of the Divi builder as well but you’re already gonna see it, check it out y’all it’s already just perfectly extended all the way out keeping everything in that one singular line all the way across really nice, great user experience. For those of you running on that Divi Builder, if you wanted to know where to add in that CSS here you can go into your global header where that menu is.
And once you’re in this screen I don’t know if you’ve ever checked this out, but you can go down here to our three dot menu open that little guy up right there. There is a gear icon that lives right here that little gear icon allows you to go into an advanced CSS area and you can add CSS here. And that’s really what I’ve done to provide that transparent background and adding in the image and everything I wanted to inside that menu. I can enter in here and drop in that same bit of code for me to just have that 100% width in there.
Another bit of code that you might need to add if you’re struggling with anything else in there is this extra line here that allows for zero padding and a hundred percent width. So I’ll include both of these lines of CSS inside the code and you might just be able to copy and paste both of those and drop ’em right in. Once you click the check mark, click Save. And again, because we’re using the builder, remember that you’ve got one extra step to do, will close out this screen here, go back to this screen and click save all changes, right?
Once that’s done, that’s active now and your header should function correctly. Let’s go and take a look at the front side of the website, just to ensure that all is well, remember also you always wanna check this on the mobile view just to be certain that things are stacking correctly after you make a significant change like this to CSS.
So again, really nice even singular line menu options.
Y’all I hope this has been helpful for you obviously you’re running on Divi. So when you are ready to go even further and add more wow factors to your Divi website please be sure to check out my entire playlist that I have dedicated to the Divi theme here on my YouTube channel and be sure to like and subscribe come back here with me every single Wednesday I’ll be right here helping you improve your online marketing inside the world of WordPress. Have a good one y’all, see you next time.
