Move burger menu to right side

Deutsch Diskussion Technische Fragen & Antworten

Topic summary

Main issue: Move the mobile hamburger (burger) menu to the right side of the header.

Context and clarifications needed:

  • Theme not initially specified; later confirmed as Impulse.
  • Scope unclear: Only on mobile (as screenshot suggests) or also on desktop?
  • Reason/use-case for the change not provided.

Proposed approach (example for Dawn theme only):

  • Add a CSS rule to Assets → base.css to right-align the drawer on mobile:
    @media screen and (max-width: 989px) { header-drawer { justify-self: end !important; } }
  • Note: Test in a duplicated theme first; breakpoint may need adjustment.

Theme-specific considerations (Impulse):

  • The Dawn snippet will not directly apply. Impulse likely requires edits to the mobile header structure plus JavaScript and CSS.
  • Edits may involve Liquid templates (Shopify’s templating language), which can complicate maintenance.

Risks and caveats:

  • Custom code can slow page load and may prevent future theme update compatibility.

Next steps / status:

  • No final solution provided for Impulse. Suggested to contact Impulse (Archetype) support and review related community threads.
  • Discussion remains open pending theme-specific implementation and clarified requirements.
Summarized with AI on January 31. AI used: gpt-5.
1

Hi there, can someone help me to move the burger menu to the right side?

Thanks!

David

IMG_0267.PNG
IMG_0267.PNG1179×2556 230 KB

2

Hey David! @do03870

thanks for the question and you have reached the German community but English is fine too! Is there a concrete use-case why you want to move it to the right? And what theme is that?

The reason I’m asking follow-up questions is that there is information missing in your question above which can help us to help you! For example, do you want this change on desktop and on mobile or just on mobile as per your screenshot above?

Caveat: this will require a complex code solution across a few liquid files and such code changes can 1) slow down your page loading speeds, and 2) exclude your theme from any theme updates going forward! Just so you are aware of that…

In my Test-Dawn Theme I moved the Hamburger to the right on mobile by adding the following code to the bottom of → Assets → base.css:

@media screen and (max-width: 989px)
header-drawer {
            justify-self: end !important;
}

But again, please test this in a theme copy first → theme → Actions → Duplicate → edit code. This is also theme-dependent and you may need to adapt the max-width px parameter to suit.

Hope that helps! :wink:

3

Dear Gabe,

thanks!

I’m using the Impulse Theme. So the code has to be different.

Best,

David

4

@do03870

Yes that’s correct - I used Dawn above because you hadn’t disclosed your theme or why you want to achieve this in the first place. Perhaps the Impulse theme developers can help you if you contact them here? It would require a Code adjustment in the mobile header as well as an adjustment in the javascript and CSS. So it’s not that straightforward.

But perhaps you can find some threads in our EN community here that can help you further!