Recently, when I was creating a website for a client with the Divi theme, I ran into the following problem: That particular website had quite a lot of menu items (pages) and some of them had long titles (some had 3-4 words). And this caused that these titles were stacked into 3-4 lines (just for one menu item).

To fix this, I applied the following custom CSS code to increase the width of the sub-menu items:

@media screen and (min-width: 981px) {
.sub-menu {
min-width: 380px;
}

#top-menu li li a {
width: 350px;
padding: 6px 10px;
}
}

This solved the issue.

The first part of the code assures that on desktop devices (that are at least 981px wide), the minimum width of the sub-menu drop-down boxes will be 380 pixels.

The second part of the code is additional – it sets the padding around the sub-menu texts. Feel free to remove it, as you may not need it.

Also, you can play around with the numbers and adjust their values in this code to suit your needs.

If you are new to Divi and do not know where to insert this code, I will explain it to you right now. Just copy & paste this code into Divi > Theme Options > Custom CSS (in your WordPress admin panel). Or, alternatively, if you are using a child theme, insert this code into the style.css file of your child theme.

And that is it. Feel free to subscribe to my newsletter if you want to be notified of my future Divi tips like this one.

Finally, you might also like to check out my other Divi header tutorials: One is on how to create a custom header and the other is on how not to shrink the header when scrolling (this is a Divi-specific feature).