Sometimes lines of wrapping text for sub-menu items are not what you want! Here’s a quick tweak to resolve this…
The code below sets the minimum width at 300px. Adjust this as needed for your website. Update accordingly the list item width if you change the sub-menu minimum width. (E.g. If you increase/decrease one, increase/decrease the other by the same.)
There is an extra line to reduce the Divi default padding around the sub-menu list items. Remove this line if it is not desired for your website.
/* Increase width of drop-down menus */
@media screen and (min-width: 981px) {
.sub-menu {
min-width: 300px;
}
#top-menu li li a {
width: 260px;
/* Extra - Reduce padding on list items */
padding: 4px 12px;
}
}
Where to paste the CSS snippet
Navigate to Divi>Theme Options and at the bottom of the default “General” tab, paste the CSS snippet into the “Custom CSS” box and save changes.
Child Themes
We recommend using a child theme. It is your insurance against losing your custom work in updates. Click here for instructions on adding a basic Divi child theme with a stylesheet (for custom CSS). Click here to learn more about child themes and getting the most out of the Divi theme.