How to style and adjust the width of the dropdown menu in Divi with CSS

by Mark | Oct 9, 2018 | Divi tutorials | 3 comments

Shares 14

Do you want to style your dropdown menu in Divi a little different than the style options that are available? In this tutorial, I’ll show you how you can accomplish that with CSS.

At the end of this post I’ll also show you how you can increase the width of the dropdown menu.

You can see a live demo here.

Demo website

CSS styles for your dropdown menu

First you need to create a dropdown menu. Then you can add this CSS for the styling. place the CSS code in Theme options > Custom CSS or in your child theme if you are using one.

/* ##### DROPDOWN MENU STYLES ##### */

#top-menu .sub-menu {
   background-color: #3c5464; /* Background color dropdown */
   border-top: 3px solid #25313a; /* Top border color dropdown */
}

#top-menu .sub-menu li a {
   font-size: 14px; /* Font size dropdown */
   width: 100%;
   color: #fff;
   border-bottom: 1px solid #768792; /* Border bottom menu item color */
}

.sub-menu li:hover {
   background-color: #25313a; /* Hover color menu item */
}

.sub-menu .current_page_item {
   background-color: #25313a; /* Current menu item color dropdown */
}

#top-menu .sub-menu li {
   padding-left: 0px;
   padding-right: 0px;
   width: 100%;
}

#top-menu li li a {
   padding-top: 10px;
   padding-bottom: 8px;
}

#top-menu .sub-menu {
   padding-top: 0px;
   padding-bottom: 0px;
}

.nav ul li a:hover {
   opacity: 1;
   background-color: rgba(0,0,0,0);
}

Note: I have added some notes between /* */ so you know where you can change the colors and font size.

Increase the width of the dropdown menu

Sometimes the text of your dropdown menu breaks on another line, to avoid this we can increase the width of the dropdown menu. Add the following CSS code in Theme options > Custom CSS

/* ##### DROPDOWN MENU WIDTH ##### */

.nav li ul {
   width: 280px !important; /* Width of the dropdown menu */
}

.nav li li ul {
   left: 280px !important; /* Use the same size as above */
}

#top-menu li li a {
   width: 240px; /* Make this 40 less then the width of the dropdown menu */
}

Note: If you want to change the width to something else then follow the notes between /* */

Join today

Free Membership

Sign up for a Free membership and get access to this and all other free Divi layout packs, cheat sheets, exclusive discounts and much more.

Join today for free

3 Comments

Jonathan Starr on October 9, 2018 at 4:18 pm

This is awesome! You should create a cheat sheet for the main menu level as well. That would be bomb!
Reply
RILDO LIMA on October 12, 2018 at 9:07 pm

Thank you for sharing your knowledge. very good!
Reply
iisiolu on November 27, 2018 at 9:55 pm

thumps. very helpful
Reply