Fade-in and out transition effect for Drawer Menu when hovering on Hamburger icon in Dawn

Fade-in and out transition effect for Drawer Menu when hovering on Hamburger icon in Dawn

BlankStudio
Explorer
44 0 15

Hello everyone,

So, I've been trying to make the drawer menu appear when hovering on the hamburger icon, with a fade-in transition effect for the drawer menu but I could not find any solutions.

I've managed to disable the transition effect but not modifying it.

Can I anyone help me out? Thanks.

sss.PNG

Replies 2 (2)
BlankStudio
Explorer
44 0 15

Can you please share your solution in this community so for others with the same issue can find the solution easily.
Here is my site www.blankstudiocy.com

Please post your custom code and steps here. Thanks

BlankStudio
Explorer
44 0 15

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:

 

 

<style>
    .js details[open]>.menu-drawer {
    opacity: 0;
    }
    .js details[open].menu-opening>.menu-drawer {
    opacity: 1;
    transition: opacity 0.3s ease;
    }
    </style>

 

 

Add this code below {%- endif -%} in Theme.liquid