Increase Divi Drop-Down Menu Width

Do you want to increase the Divi drop-down menu width?

If so then look no further.

I am always changing the Divi drop-down menu width. They start off quite narrow by default (see the picture above)!

I prefer it to be nice and wide (but not too wide) – then you can fit more menu items in and they will only take up one line each.

I tried a few things to get this working but in the end it was OptimusDivi.com that figured it out first.

Now it works every time!

The following snippet contains a slightly edited version. I have also added some explanation to help you understand how it works.

CSS Snippet to Increase Divi Drop-Down Menu Width

The best way to change this is to add a snippet of custom CSS – as follows…

/* Media query ensuring it only applies on desktop-sized screens*/
@media screen and (min-width: 980px) {
/* Makes the drop-down box wider - change this value if you need */
.sub-menu {
	min-width: 350px;
}
/* Makes the navigation menu links themselves wider to fit into the wider box */
#top-menu li li a {
    width: 310px;
    padding: 4px 12px;
	}
}

I will break it down for you in 3 parts, as follows…

@media screen and (min-width: 980px){

}

This is a media query.

It means the CSS rules in the brackets only apply on devices wider than 980px.

Why did we add this? On mobiles Divi shows a hamburger menu and widening the drop-down menu too much will look bad because mobile screens are narrow to begin with.

.sub-menu {
	min-width: 350px;
}

.sub-menu refers to an unordered list of anchor tags that forms the drop-down menu.

Making it “min-width: 350px;” makes the box itself 350px wide (an improvement).

There’s one final part though.

#top-menu li li a {
    width: 310px;
    padding: 4px 12px;
}

Without this CSS rule the links themselves will be narrow the same as before (even though the box is wider).

This part of the CSS specifically targets the anchor tags within the <li>, within another <li> within the <ul> element with id #top-menu.

By making them wider (but not too wide) it makes the links themselves expand to fill up the drop-down menu rather than be cramped up to one side of it.

Check out our other PHP/Wordpress guides here.