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.

Minimise screen, then shrink and enlarge viewport to test on all desktop sizes and ensure your tweaks are optimal 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

Copy and paste the above snippet into one of the following two places (depending on where the rest of your custom CSS code is residing):

1) 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.

divi theme options

2) If you are using a child theme, navigate to Appearance>Editor and paste the CSS snippet into your child theme’s stylesheet.

navigate to wordpress theme editor

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.

Want more module options for your Divi website?

Check out our Custom Modules for Divi
Browse Custom Modules