I’ve managed to add a fade-in effect to the drawer menu but not a fade-out effect.
Here is the code I used:
Add this code below {%- endif -%} in Theme.liquid
Topic summary
Goal: Add hover-triggered drawer menu in Shopify’s Dawn theme with fade-in and fade-out transitions on the hamburger icon.
Context: The author could disable the default transition but couldn’t modify it initially. Later, they achieved a fade-in effect but still can’t get a fade-out effect.
Technical notes: Drawer menu = slide-out navigation panel; hamburger icon = three-line menu button. Instructions mention adding custom code below {% endif %} in Theme.liquid, but the shared code snippet is not visible in the thread.
Artifacts: An image illustrating the issue is attached; the exact code is referenced but not provided. A site link (blankstudiocy.com) was shared for context.
Community request: The author asks others to post their custom code and steps publicly so the solution is easy to find.
Status: No confirmed method for the fade-out transition yet. Discussion remains open with an unresolved key question: how to implement a smooth fade-out on drawer close.