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

Store Design
, , , ,
1

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.

Here is the hamburger Menu Icon on the right-hand side
Here is the hamburger Menu Icon on the right-hand side370×493 77.6 KB

And here is how the drawer opens, from the left-hand side
And here is how the drawer opens, from the left-hand side348×509 4.2 KB

2

@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 !

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 :disappointed_face:

4

@AndreiGhetu

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

5

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);
}
6

https://viellelondon.com/password

password: 123123123

7

@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);
}
8

Perfect solution !