Drawer Menu Slide Animation

Solved

Drawer Menu Slide Animation

BlankStudio
Explorer
45 0 16

Hello everyone,

So, I always hated the drawer menu animation in Dawn theme and I've tried so many codes and none of them worked.

The only thing I know how to do is to remove the animation but not modifying it.

I want it to have a fade-in and out animation.

Can somebody help me out with this?

Thanks.

 

Also, there is something going wrong with the icon of the drawer menu.

I would appreciated if somebody can fix it!

www.blankstudio.store

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
8552 1687 1695

This is an accepted solution.

Hi @BlankStudio 

Plesae add this code to your theme.liquid file, after <head> in Online Store > Themes > Edit code 

<style>
.menu-drawer {
transform: unset !important;
opacity: 0;
}
.js details[open]>.menu-drawer, .js details[open]>.menu-drawer__submenu {
    transition: opacity .5s linear !important;
    opacity: 1;
}
}
</style>

- Helpful? Like and Accept solution to let me know!>
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 3 (3)

AnneLuo
Shopify Partner
775 149 164

Hi, @BlankStudio 

I can help you with it. So I need to access your store as a collaborator if possible. 

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

Dan-From-Ryviu
Shopify Partner
8552 1687 1695

This is an accepted solution.

Hi @BlankStudio 

Plesae add this code to your theme.liquid file, after <head> in Online Store > Themes > Edit code 

<style>
.menu-drawer {
transform: unset !important;
opacity: 0;
}
.js details[open]>.menu-drawer, .js details[open]>.menu-drawer__submenu {
    transition: opacity .5s linear !important;
    opacity: 1;
}
}
</style>

- Helpful? Like and Accept solution to let me know!>
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

BlankStudio
Explorer
45 0 16

Nice, this actually works!!

Its weird why the animation works after the second try.

But overall, its working very well.

Thank you!