How to remove the menu mobile drawer animation (Atelier Theme)

Store Design

Topic summary

Issue: User wants to disable the staggered animation effect where mobile menu links appear one by one in the Atelier theme’s drawer.

Solutions Proposed:

  • General CSS override: Add animation and transition disabling rules to base.css or theme.css targeting links and navigation items. Alternatively, check if the theme has a built-in animations toggle in the Theme Editor.

  • Targeted fix for mobile drawer: Insert specific CSS code into the header section’s “Custom CSS” field to disable animations on .menu-drawer__animated-element when the drawer is open.

Status: Multiple solutions offered; awaiting confirmation of which approach worked or request for the website URL to provide more specific guidance.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
1

I want to remove the animation where links are revealed one by one.

2

That animation effect is usually controlled by CSS/JS in your theme. You can turn it off by overriding the animation styles

  • In Edit code → Assets → base.css (or theme.css), add:
a, .link, .nav-item {
  animation: none !important;
  transition: none !important;
}
  • Save and refresh the links will load instantly instead of revealing one by one.

If your theme has an Animations setting in the Theme Editor, you can also just disable it there.

3

@PM999 can you please share your website link?

4

You mean in mobile menu drawer?

Add this code to the “Custom CSS” of the header section:

header-drawer .menu-drawer-container[open] .menu-drawer__animated-element {
  animation: none;
}
1 Like