Hi,
I would like to understand how can I move the mobile menu (icons) to the left on the homepage without moving them on other pages?
Website: https://sugar-free-eu.myshopify.com/
pass: eveirt
Thank you in advance
Topic summary
Goal: move Shopify mobile menu icons to the left on the homepage only, without affecting other pages.
Initial solution: add a CSS block in theme.liquid right after , wrapped in a Liquid conditional {% if template.name == “index” %} to target only the homepage. Within @media(max-width:767px):
- Reorder header elements using CSS order to place icons first and logo later.
- Set flex-direction: row-reverse on the icons container to adjust icon alignment.
Outcome: this change worked and was marked as the solution.
Follow-up request: adjust alignment further by pushing the menu slightly to the right to match other pages.
Latest recommendation: add CSS at the bottom of theme.css with @media(max-width:767px) and .site-header__mobile-nav { width:100% !important } to influence placement.
Key terms: Liquid conditional (limits CSS to homepage), media query (applies on mobile), flex order/row-reverse (controls layout order and direction).
Status: initial repositioning confirmed; the rightward adjustment suggestion is provided, but final confirmation is pending. Images show code placement but are not essential to the solution.
Hi @Eli90
This is PageFly - Advanced Page Builder. I would love to give you some recommendations
Go to Online Store->Theme->Edit code theme.liquid paste my code after element
{% if template.name == “index” %}
@media(max-width:767px){ header .site-header__mobile-nav .logo-align--left{ order:3 !important } header .site-header__mobile-nav .site-header__icons{ order:1 !important } header .site-header__mobile-nav .site-header__icons >div{ flex-direction: row-reverse !important } }{% endif %}
Best Regards;
PageFly
1 Like
Hi @PageFly-Victor thanks a lot for this! it really worked, so I marked it as a solution, but actually I got confused. I meant pushing the menu a bit more to the right, so that it would be aligned with the menu on the other pages. Could you please tell me how can I push it right a bit ?
thank you in advance!
you can add it to the bottom of the file theme.css
@media(max-width:767px){
.site-header__mobile-nav{
width:100% !important
}
}
1 Like