Why isn't my main menu navigation opening smoothly?

Technical Q&A
,

Topic summary

A user changed their Shopify theme’s main menu navigation from left-aligned to right-aligned, but encountered issues with the opening animation and item alignment.

Problem Details:

  • Menu doesn’t open smoothly after repositioning
  • Menu items don’t display properly on the intended side
  • User provided a screenshot showing the issue

Proposed Solution:
A community member suggested adding CSS code to the theme’s base.css file:

  • Target .menu-drawer with transform: translate(100%)
  • Adjust positioning properties for .details[open] .menu-opening > .menu-drawer
  • Set right: 0 and left: auto with !important flags

Status: Solution provided but not yet confirmed as resolved by the original poster.

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

Hi,

Recently, I changed the menu from left to right. When I press the menu, the menu doesn’t open smoothly and the menu items don’t appear on the same side.

Is there a code I can add to resolve this issue?

Please check below URL:

matilalight.com/

Screenshot_٢٠٢٢-١١-٠٥-٢٣-٣٢-٢٤-٠١٨_com.android.chrome.jpg
Screenshot_٢٠٢٢-١١-٠٥-٢٣-٣٢-٢٤-٠١٨_com.android.chrome.jpg1080×2400 86 KB

2

Hi @Alfarsi ,

Go to Assets > base.css and paste this at the bottom of the file:

.menu-drawer {
    transform: translate(100%) !important;
    right: 0 !important;
    left: auto !important;
}
details[open].menu-opening>.menu-drawer {
  transform: translate(0) !important;
}

Hope it helps!