Drawer Menu Slide Animation

StudioBlank · ‎07-08-2024

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

᥇ꪶꪖꪀᛕ ᦓꪻꪊᦔ꠸ꪮ

Dan-From-Ryviu · ‎07-08-2024

Hi @StudioBlank

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>

- Found this helpful? Hit "Like" and "Accept as Solution"!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

AnneLuo · ‎07-08-2024

Hi, @StudioBlank

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 · ‎07-08-2024

Hi @StudioBlank

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>

- Found this helpful? Hit "Like" and "Accept as Solution"!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

StudioBlank · ‎07-09-2024

Nice, this actually works!!

Its weird why the animation works after the second try.

But overall, its working very well.

Thank you!

᥇ꪶꪖꪀᛕ ᦓꪻꪊᦔ꠸ꪮ

Drawer Menu Slide Animation

Drawer Menu Slide Animation

Buy Me A Coffee ☕

Community Blog Articles