Divi Default Header Dropdown Styling

May 23, 2023

Updated Jan 2024

This code styles dropdown menus on desktop. I’m using the slide effect on the dropdown (in customizer settings) but instead of having it slide in left to right I’m changing it to slide up from the bottom. A bit of space is also added between the header and the dropdown.

Notes

Customizer settings: Primary menu bar > dropdown menu animation > slide

The dropdown icon is using Elegant Themes’ icon font and can be changed.

CSS Code

/*** DEFAULT HEADER NAVIGATION DROPDOWN ***/
 #top-menu a:hover, #top-menu-nav>ul>li>a:hover, #top-menu ul.sub-menu li a:hover, .et-menu-nav a:hover, .et_mobile_menu li a:hover {
     opacity: 1; /* remove opacity on link hover */
}
 @media only screen and (min-width: 981px) {
     #top-menu ul.sub-menu {
         width: auto;
         border: 0;
         padding: 10px 0 0; /* gap between header and dropdown */
         -webkit-box-shadow: none;
         -ms-box-shadow: none;
         box-shadow: none;
    }
     #top-menu li li {
         padding-left: 0;
         padding-right: 0;
    }
     #top-menu li li a {
         background-color: #2A313F; /* dropdown link background */
    }
     #top-menu li li a:hover {
         background-color: #385167; /* dropdown link background on hover */
    }
    #top-menu .menu-item-has-children>a:first-child:after {
		 content: '\43'; /* change dropdown icon */
	 }
     .et_primary_nav_dropdown_animation_slide #et-top-navigation ul li:hover>ul, .et_secondary_nav_dropdown_animation_slide #et-secondary-nav li:hover>ul {
         -webkit-animation: fadeBottom .2s ease-in-out; /* change slide direction */
         -ms-animation: fadeBottom .2s ease-in-out;
         animation: fadeBottom .2s ease-in-out;
    }
}

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.