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:
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.
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.
Hi @ArnauP ,
Follow these Steps:
If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!
Best Regards,
Makka
