How to increase width of Divi drop-down menu
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.
CSS Code:
/* 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;
}
}