I want hamburger menu to right in dawn the

Store Design
1

I want to move the menu to be right on mobile in dawn theme

2

@logashutterz ,

Share the store link.

3

@logashutterz Send me store url and password.

4

Hi @logashutterz ,

Kindly share your store url, so that we can check and provide you the solution.

5

https://fiftysevendemo1.myshopify.com/
PWD: afleiy

6

@logashutterz ,

where do you want to keep the search or other items? can you explain?

7

Add this CSS code Online Store > Themes > Edit code > Assets > custom.css or theme.css

@media screen and (max-width: 989px) { 
.header { grid-template-areas: 'heading icons left-icon'; }
header-drawer { justify-self: end;} 
}
8

But I dawn theme there is now custom.css or theme.css and only assets have
base.css. where need to update base.css

9

please add below css code in bottom of assets/base.css file

@media screen and (max-width: 989px)

header-drawer {
justify-self: end !important;

}

Thank you.

10

hamburger menu has been fixed in right side but also menu drawer open from right side on mobile version. now hamburger menu to right side and menu open from left side. i need open from right siide

Now

Can you help on this?

11

Hi guys, old thread but I thought I’d add my tuppence happeny. In the new version of dawn, at preset version 8.0.0, I noticed that the fix seems to be slightly different. I used the following code to achieve this if people are still interested in doing this. Particularly useful if you have a square logo.

/* BURGER MENU RIGHT */

@media screen and (max-width: 989px) { 
  .header { 
	grid-template-areas: 'heading icons left-icon'; 
	grid-template-columns: auto 2fr auto;}
  header-drawer { justify-self: end;} 
}

header-drawer {
  margin-left: 1.5rem
} 

The explanation is that the icons will appear to have a load of space around them if you don’t do this. You may want to change the tabbing order after doing this

12

Oops, forgot, worth noting, you’ll need to replace the css for header-drawer in the header.liquid file, rather than the base.css, it’s the first line. Alsop, my icons are slightly bigger than the originals so you may need to adjust the value in meargin-left of header drawer, I don’t think you will but if there’s a really big gap or a small one, that’s how you fix it,.