Dawn theme how do I make to open the drawer from the right hand side?

Solved

Dawn theme how do I make to open the drawer from the right hand side?

AndreiGhetu
Tourist
53 0 3

Hello. I have a question. If someone could help me it will be appreciated. I managed to move the hamburger icon to the right-hand side, but I can't manage to make the animation for the drawer to open from the same position as well. I want to make it come out from the right-hand side when pressing the hamburger menu icon, instead of coming out from the default left side.

poza 1.pngpoza 2.png

 

Accepted Solution (1)
wattsmork
Shopify Partner
26 8 7

This is an accepted solution.

@AndreiGhetu 

Could you try with my solution?

 

I had tested with your store and it works fine

 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > component-menu-drawer.css  and paste this at the bottom of the file:

 

.menu-drawer {
  transform: translate(100%);
  left: unset;
  right: 0;
}

.js details[open].menu-opening>.menu-drawer {
  transform: translate(0);
}

View solution in original post

Replies 7 (7)

infoatcodelab7
Shopify Partner
593 141 151

@AndreiGhetu 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css  and paste this at the bottom of the file:

 

@media(max-width:989px){
  .header.header--middle-left.page-width.header--has-menu {
  display: flex;
  justify-content: space-between;
}
header-drawer {
  order: 3;
}
.menu-drawer {
  transform: translate(100%);
  left: unset;
  right: 0;
}
.js details[open].menu-opening>.menu-drawer {
  transform: translate(0);
}

Hope this works well for your site,

 

Best Regards !

 

Want to modify or develop new website, Hire us.
If helpful then please Like and Accept Solution .
Email: info@codelab7.com
AndreiGhetu
Tourist
53 0 3

Hi. Thank you for the code but unfortunately, it is not doing anything for me at least. Still, the drawer comes from left-hand side 😞

infoatcodelab7
Shopify Partner
593 141 151

@AndreiGhetu 

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

Want to modify or develop new website, Hire us.
If helpful then please Like and Accept Solution .
Email: info@codelab7.com
AndreiGhetu
Tourist
53 0 3
wattsmork
Shopify Partner
26 8 7

This is an accepted solution.

@AndreiGhetu 

Could you try with my solution?

 

I had tested with your store and it works fine

 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > component-menu-drawer.css  and paste this at the bottom of the file:

 

.menu-drawer {
  transform: translate(100%);
  left: unset;
  right: 0;
}

.js details[open].menu-opening>.menu-drawer {
  transform: translate(0);
}
Orimoryo
Visitor
1 0 0

Perfect solution !

wattsmork
Shopify Partner
26 8 7

Hello @AndreiGhetu ,

 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > component-menu-drawer.css  and paste this at the bottom of the file:

 

.menu-drawer {
  transform: translate(100%);
  left: unset;
  right: 0;
}

.js details[open].menu-opening>.menu-drawer {
  transform: translate(0);
}