Add animate effect in Shopify drop down menu
You know, we can make our Shopify store more attractive and professional. To be honest I don’t like Shopify’s default menu style or design. First It does not open on hover. Customers have to click on the drop-down menu to open the sub-menu. Second, when the drop-down menu opens there is no animate effect.
In my previous tutorial with video I have shared “How to show Drop Down Menu on Hover Instead of Click – Shopify Debut Theme” and In this tutorial, I am going to show you “How to add animate effect in Shopify drop down menu“
Add animate effect in Shopify drop down menu
The very first step is add a css class in Shopify theme. From Shopify Dashboard, navigate to your Theme editor
Step 1: Access theme editor
Step 2: Open header.liquid file
Step 3: Open header.liquid file and add dropdown-animate class in menu ul
Step 4: Open css.liquid file and add below css code
/******** Animate Menu **********/
.site-nav--has-dropdown:hover .site-nav__dropdown {
display: block;
}
.site-nav__dropdown { top: 100%; }
.site-nav > li > .site-nav__dropdown {
margin-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
display: block;
transform: scale(0);
transition: ease-out 0.3s;
}
.site-nav--has-dropdown:hover .site-nav__dropdown {
transform: scale(1);
background: var(--predictive-search-focus);
border: var(--color-overlay-text-focus);
border-radius: 5px;
}
.dropdown-animate
{
border:none;
display: block;
transform: scale(1)!important;
height: 0px;
overflow: hidden;
padding: 0px;
top: 180px;
transition: all .3s;
}
.site-nav--has-dropdown:hover .dropdown-animate
{
display: block;
top: 100%;
height: inherit;
}