Drawer menu issues no animation and close delayed - dawn theme

Store Design
, , , ,

Topic summary

A user encountered two problems with their customized Dawn theme’s drawer menu:

Issues identified:

  • Opening/closing animations not working (menu appears/disappears abruptly)
  • Close button has a ~1 second lag/delay when clicked

Solution provided:

The issues were resolved through CSS modifications in Assets/component-menu-drawer.css:

  1. For animation fix: Remove existing code and add CSS targeting .js details[open] elements with proper transform and visibility transitions using theme’s default duration variable

  2. For close button delay: Add CSS for .header__icon--menu .icon with faster transition timing (.15s ease) and proper transform/opacity/visibility properties

Outcome: Both problems were successfully resolved after implementing the suggested code changes. The menu now animates smoothly and the close button responds without delay.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I am having an issue with my drawer menu on my customised dawn theme. the opening and closing animation is not working, the menu just pop up. Also the close is lag/delayed and happened a second after the click on close button.

website : https://a91d87-c1.myshopify.com/collections/frontpage

password : Password25!

Thanks for your help!

Screenshot 2024-06-16 at 16.35.09.png
Screenshot 2024-06-16 at 16.35.09.png1158×1610 116 KB

2

Hi @GM15 ,

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code

  2. Assets/component-menu-drawer.css

  3. Refer screenshot below to remove code

EBOOST_0-1718599862363.png
EBOOST_0-1718599862363.png1398×794 73.2 KB

  1. Add code below
.js details[open] > .menu-drawer,

.js details[open] > .menu-drawer__submenu {

  transition: transform var(--duration-default) ease, visibility var(--duration-default) ease;

}
.js details[open].menu-opening > .menu-drawer,

details[open].menu-opening > .menu-drawer__submenu {

  transform: translateX(0);

  visibility: visible;

}
3

Thank you !! works perfectly now

4

Can you also please check why the close button transform back into the burger menu with 1sec lag/delayed ? thanks

5

Hi,

You can try add code below:

.header__icon--menu .icon {
    transition: transform .15s ease,opacity .15s ease
}

.js details[open]:not(.menu-opening)>.header__icon--menu .icon-close {
    visibility: hidden
}

.js details[open]:not(.menu-opening)>.header__icon--menu .icon-hamburger {
    visibility: visible;
    opacity: 1;
    transform: scale(1.07)
}
1 Like
6

thanks, everything is working !!