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

BlankStudio
Excursionist
39 0 14

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
Excursionist
39 0 14

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
Excursionist
39 0 14

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