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