Logo left and menu right side position on mobile view
Solved
Accepted Solution (1)
You add code following this instruction.
- Go to Online Store, click Themes
- In the current theme, click "..." > select Edit code
- Open theme.liquid file, add this code after <head>
<style>
@media (max-width: 749px) {
.header__main-nav {
grid-area: secondary-nav !important;
}
.header__main-nav .header__icon-list {
justify-content: flex-start !importnt;
flex-direction: row-reverse !important;
}
.header__logo {
grid-area: main-nav !important;
}
.header__secondary-nav {
grid-area: logo !important;
}
}
</style>The result
You add code following this instruction.
- Go to Online Store, click Themes
- In the current theme, click "..." > select Edit code
- Open theme.liquid file, add this code after <head>
<style>
@media (max-width: 749px) {
.header__main-nav {
grid-area: secondary-nav !important;
}
.header__main-nav .header__icon-list {
justify-content: flex-start !importnt;
flex-direction: row-reverse !important;
}
.header__logo {
grid-area: main-nav !important;
}
.header__secondary-nav {
grid-area: logo !important;
}
}
</style>The result
Community Blog Articles
Canadian merchants: Update account details by March 24, 2025 to continue us...
Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025
New learning path from Shopify Academy: How to create a digital marketing s...
Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025
Expert insights on conversion rate optimization (CRO) from Shopify Academy ...
Learn how to increase conversion rates in every stage of the customer journey by enroll...
By Shopify Mar 5, 2025