Divi Dropdown Menu Styling with Background Image and Gradient Overlay

May 9, 2020 | CSS Tutorial | 0 comments

I’ve done this simple dropdown styling for a few clients and thought it might come in handy for other Divi users. I think it’s an easy way to spruce up menu dropdowns, which tend to be neglected and plain. Surely there are plugins out there that can add a background image but this is for people who like playing with code, or just don’t want to buy a plugin.

This is for desktop menu only but if you want to style your mobile menu a bit you can check out this tutorial.

Works for default, centered, and centered inline logo header styles.

 

Some more examples below. You can add ET icons, Font Awesome, or another icon library to your menu items for further customization. Or instead of an image maybe use a fun little GIF! In my examples not using the gradient all I’m doing is changing the background-size and background-position.

Divi Dropdown Menu Styling with Background Image and Gradient | A Girl and Her Mac
Divi Dropdown Menu Styling with Background Image and Gradient | A Girl and Her Mac
Divi Dropdown Menu Styling with Background Image and Gradient | A Girl and Her Mac

Instructions

  • In appearance > menus
    • add the class dropdown-one to your top-level menu item. If you don’t see the CSS class field check your screen options
  • Add my CSS and tweak to suit your needs

css code

The CSS can go in your child stylesheet OR appearance > customize > additional CSS OR Divi theme options > custom CSS box.

/***************************/
/*** DROPDOWN NAVIGATION ***/
/***************************/

/*** DROPDOWN ARROW - OPTIONAL ***/
 #top-menu .menu-item-has-children > a:first-child:after, 
 #et-secondary-nav .menu-item-has-children > a:first-child:after {
     font-size: 13px;
     right: 4px;
	 color: #a9882f;
}
/*** DROPDOWNS / SUBMENUS ***/
 #main-header .nav li ul {
     border: 0;
     border-radius: 0;
     overflow: hidden; /* this is really only needed if you change the border-radius */
     width: 380px; /* width of submenu, adjust if needed */
     padding: 20px 200px 20px 10px;
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     display: grid;
     /* grid-template-columns: auto auto; use if you want two columns */
     /* top: 25px; if you want to raiser or lower the submenu */
     /* right: -300px; if you need to move the submenu left or right */
}
/*** DROPDOWN LINKS ***/
 #top-menu li li {
     padding: 8px 15px;
     line-height: 1.4em;
}
 #top-menu li li a {
     display: inline-flex;
     max-width: 160px; /* adjust or delete */
     padding: 0 0 4px;
}
 #top-menu li li a:hover, 
 .et-fixed-header #top-menu li li a:hover {
     color: #a9882f; /* submenu link color on hover */
     opacity: 1;
     background: transparent;
}
/*** GRADIENT OVERLAY - OPTIONAL ***/
 #main-header .nav li ul:after {
     content: "";
     width: 100%;
     height: 100%;
     background-image: linear-gradient(to right,white,white,rgba(255,255,255,0.8),rgba(255,255,255,0.3), rgba(255,255,255,0)); /* I'm using multiple steps to ensure enough white behind my text but use what you need */
     position: absolute;
     top: 0;
     left: 0;
     z-index: -1;
}
/*** BACKGROUND IMAGE ***/
 @media only screen and (min-width: 981px) {
    /*** FIRST DROPDOWN ***/
     .dropdown-one ul.sub-menu {
         background-image: url("https://placehold.it/400x250");
    }
}

 

Notes:

  • My fonts and colors are set in the customizer.
  • I’m only using one dropdown on my demo but as you can see from my examples you can use a different image for each dropdown menu if you choose. Each menu will just need its own class — like “dropdown-two”, “dropdown-three”, and so on.
  • If you’re using a fixed header you might need additional CSS for the fixed dropdown link color. Comment with a link and I’ll get you sorted.