How can I change the menu orientation on Refresh theme on mobile?

Store Design
,

Topic summary

On the Shopify Refresh theme (mobile), the goal was to move the hamburger (menu) icon to the right and place the search/cart icons on the left.

Key solution provided:

  • Edit code: Online Store → Themes → Edit code → Assets → base.css.
  • Add CSS to adjust grid placement:
    • header-drawer → grid-column: 3; justify-self: end (moves the menu button to the right).
    • .header__icons.header__icons–localization.header-localization → grid-column: 1; justify-self: start (moves search/cart to the left).

An earlier suggestion proposed inserting custom code before in theme.liquid, but no specific code was included in that post.

Outcome:

  • The CSS change in base.css achieved the desired layout. The original poster confirmed it “works like a charm.”

Notes:

  • Images were shared to illustrate the target layout and placement.
  • No additional plugins or JavaScript were required; changes were purely CSS.

Status: Resolved with a confirmed working CSS solution.

Summarized with AI on January 15. AI used: gpt-5.
4

Do you mean like this right?

Made4uoRibe_0-1697999656877.png
Made4uoRibe_0-1697999656877.png558×263 37.6 KB

If it is stry this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “theme.liquid” find the tag and print this code below before the tag.
1 Like