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
[css]
/*** 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;
}
}
[/css]
0 Comments