Align store LOGO to Right Side in (Mobile View)

Store Design
, , , , ,

Topic summary

A user wants to reposition their store logo to the right side and move the hamburger menu icon to the left, but only on mobile devices.

Two CSS solutions were provided:

  1. JavaScript approach: Add a <style> block with media query CSS just above the </body> tag in theme.liquid file. Uses flexbox with flex-direction: row-reverse to swap the header elements.

  2. Pure CSS approach: Add CSS to the main stylesheet (main.css, base.css, or theme.css) at the bottom. Uses CSS Grid with grid-template-areas to reorder header layout, targeting screens under 749px width.

Both solutions include @media only screen and (max-width: 749px) to ensure changes apply only to mobile views. Screenshots demonstrate the before/after results. Contributors requested the original poster mark helpful responses as solutions and provide likes if the information proved useful.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
3

Hi @ArnauP

Check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

@media only screen and (max-width: 749px){
.header {
    display: grid;
    grid-template-areas: 'heading icons left-icons';
    grid-template-columns: 1fr auto;
    align-items: center;
}
header-drawer {
    padding-left: 10px;
}
}

And save.

Result:

Made4uoRibe_0-1724690937549.png
Made4uoRibe_0-1724690937549.png612×368 25.6 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like