How to Move the Mobile Menu Icon to the Right in Shopify Dawn Theme?

Store Design
, , , ,
1

Hey,

I’m currently working on customizing the mobile view of my Shopify store and would like to move the mobile menu icon (hamburger menu) from the left side to the rightside of the screen. I’m using using Dawn theme.

Can anyone guide me on how to adjust the code to position the menu icon on the right for mobile devices? Any help or code snippets would be greatly appreciated!

Thank you!

2

Hi @Kvly

Would you mind sharing your store URL? Thanks!

3

Sure! Here’s my store URL: www.kivalyu.com.

4

Thanks for the info, do you have another preview of the store? it always giving me a snap beakout.

Made4uoRibe_1-1725487186148.png
Made4uoRibe_1-1725487186148.png710×634 6.55 KB

I manage to do this.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

@media only screen and (max-width: 749px){
.header {
    display: grid;
    grid-template-areas: "heading icons left-icons" !important;
    }
.header--mobile-left {
        grid-template-columns: auto 1fr auto !important;
    }
}

And Save.

Result:

Made4uoRibe_0-1725487169572.png
Made4uoRibe_0-1725487169572.png709×324 83.5 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

5

hello, I did as you explained, but the spaces between the icons are not good what to do? the menu is stuck to the basket and I would like to space between the two if you can help me please

6

link to my shop: www.goldenpoke.ch

and I would like to do like that, I am talking about the mobile version : www.laschocards.ch

7

How did you do it? My icons are too close to each other :disappointed_face: