Dawn theme :How to add animation to menu Opening on Mobile View

[maera]

Heyy, I want too add duration for opening and closing my mobile menu. and also transition delay for each button in my menu. Example the first button transition-delay: 0,3s  and next one 0,5s

Thanks

[Sweans]

Hi @maera ,

To add duration for opening and closing your mobile menu and transition delay for each button in the Shopify Dawn theme, you can customize the theme's CSS and JavaScript. Here’s how you can do it:

Add Transition Duration to the Mobile Menu:

1.Go to Online Store > Themes > Actions > Edit code.

2.In the Assets folder, locate and open the base.css file (or theme.css depending on your version).

3.Add the following CSS to control the transition duration for opening and closing the mobile menu:

.mobile-nav-wrapper {

    transition: all 0.3s ease-in-out; /* Adjust duration as needed */

}

Add Transition Delay to Each Button in the Menu:

In the same base.css file, add the following CSS. This will apply a transition delay to each button in your mobile menu:

.mobile-nav__item:nth-child(1) {
    transition-delay: 0.3s;
}

.mobile-nav__item:nth-child(2) {
    transition-delay: 0.5s;
}

.mobile-nav__item:nth-child(3) {
    transition-delay: 0.7s;
}

Optional: Adjusting the Opening/Closing Animation with Javascript:

If you need to control more complex animations or ensure compatibility with other scripts:

1.Go to the Assets folder and find theme.js or global.js.

2.Add or modify the JavaScript to include custom durations for menu opening/closing:

document.querySelector('.mobile-nav-toggle').addEventListener('click', function () {
    const menu = document.querySelector('.mobile-nav-wrapper');
    if (menu.classList.contains('open')) {
        menu.classList.remove('open');
        menu.style.transition = 'all 0.3s ease-in-out';
    } else {
        menu.classList.add('open');
        menu.style.transition = 'all 0.3s ease-in-out';
    }
});

These steps should give you a smooth opening/closing animation for your mobile menu and staggered transition delays for each button. Adjust the timing as needed to match your design preferences.

I hope this helps! If it does, please like it and mark it as a solution! 

If you need further assistance, feel free to reach out!

Regards,
Sweans

[maera]

Hey,

thanks for your help the first step is working but transition delay to each button is not working