Solved

Logo left and menu right side position on mobile view

WasifShabbir
Shopify Partner
4 0 0

I want in my shopify theme cart and drawer menu on right side and logo on the left side ON MOBILE VIEW.

My store URL: https://astrofreezetreats.com/

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
7892 1533 1562

This is an accepted solution.

Hi @WasifShabbir 

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

Screenshot 2024-06-04 at 15.24.24.png

- Helpful? Like and Accept solution or ❤Donate❤
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Reply 1 (1)

Dan-From-Ryviu
Shopify Partner
7892 1533 1562

This is an accepted solution.

Hi @WasifShabbir 

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

Screenshot 2024-06-04 at 15.24.24.png

- Helpful? Like and Accept solution or ❤Donate❤
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.