Add animate effect in Shopify drop down menu - eCommerce Thesis

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;
}
Shopify Expert
Shopify Expert

Leave a Reply