How do I remove transition from drawer menu (Prestige Theme)

Store Design

Topic summary

A user wants to eliminate the animated transition effect from their Prestige theme’s drawer sidebar menu, making links appear instantly without animation.

Solution provided:

A support representative offered step-by-step CSS instructions:

  1. Navigate to Shopify Admin → Online Store → Theme → Edit code
  2. Locate one of these files: base.css, theme.css, styles.css, or theme.scss.liquid
  3. Add CSS code targeting the sidebar header elements to override the transition

The CSS snippet sets opacity: 1 and transform: translateX(0px) with !important flags to force immediate display without animation effects.

Note: The conversation text appears corrupted or reversed in places, but the core technical solution and navigation steps are clear. Screenshots were included to guide the user through the Shopify admin interface.

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

I’d like to remove the transition from the drawer sidebar menu so that it just shows the links without any animation. How do I do this? (Prestige Theme)

2

Hi @PM999 ,
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

BSSTechVenture_0-1716644477121.png
BSSTechVenture_0-1716644477121.png1902×899 133 KB

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

BSSTechVenture_1-1716644482612.png
BSSTechVenture_1-1716644482612.png1916×934 101 KB

Step 3: Insert the below code at the bottom of the file → Save

.header-sidebar__main-panel,
.header-sidebar__main-panel .header-sidebar__linklist li
{
    opacity: 1 !important;
    transform: translateX(0px) !important;
}

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

1 Like