How to put the mobile menu logo to the right?

Store Design
1

Hi, i would like to put the mobile menu logo to the right and the logo itself to the left

Currently look like that

theophile7411_1-1677210985057.png

I would like this

theophile7411_0-1677210942536.png

How can i do that ? Thanks !

2

@theophile7411

Please share your site URL,
I will check out the issue and provide you a solution here.

3

hi, thanks

https://bf4d41.myshopify.com/

4

@theophile7411

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

.no-js details[open] > .menu-drawer, .js details[open].menu-opening > .menu-drawer, details[open].menu-opening > .menu-drawer__submenu {
  transform: translate(-80%);
  visibility: visible;
}
.header.header--middle-left.header--mobile-left.page-width.header--has-menu {
  position: relative;
}
header-drawer {
  position: absolute;
  right: 0;
 
}
.header__icons {
  justify-self: start;
  margin-right: 30px;
}
.menu-drawer {
  transform: translate(80%);
}
5

Hello @theophile7411 ,

You can follow these steps:

  1. Go to Online Store->Theme->Edit code

GemPages_0-1677213168407.png
GemPages_0-1677213168407.png400×193 29.2 KB

  1. Open your theme.liquid file, paste the below code before

GemPages_1-1677213191566.png
GemPages_1-1677213191566.png1719×904 74 KB

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

6

Hi @theophile7411

This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Online Store ->Theme ->Edit code

Assets ->Base.css

@media (max-width: 767px ) {
        .header {
            display: flex !important;
            justify-content: space-between !important;
        }        
        .header h1.header__heading {
            order: 0 !important;
            max-width: 180px;
        }        
        .header .header__icons {
            order: 1 !important;
        }        
        .header header-drawer {
            order: 2 !important;
        }
      }

Hope you find my answer helpful!

Best regards,

Victor | PageFly