Help in moving the Menu icon to the right

Store Design
, , , ,
1

Hi there,

this is for dawn theme. I wanted the menu icon to shift to the right side of the screen, right before the search and the cart icons. I even tried putting- left: (xyz no.)px under .header__icon–menu. .icon and it did shift to the right side and was looking fine on the desktop but on mobile view it went to an extreme level of right.

Could someone please explain as to why that is happening and what I could do to rectify this?

1 Like
2

Hi @Shreya1703

If you like to change the menu icon to the right, so it means also the opening of the menu also the right? Would you mind to share your store URL? Thanks!

3

sure! https://f42fe9-4.myshopify.com/

4

Hi @Shreya1703

You can use ‘right’ instead of ‘left’

  • Online store → Themes → Edit code

  • Choose file base.css, insert this code at the end of file and then save

#Details-menu-drawer-container summary span{
  position: absolute!important;
  right: 145px!important;
  top: 0px!important;
}

Here is result:

image.png
image.png1670×921 86.4 KB

Hope this can help you.

Kind regards

5

That absolutely worked! Thank you so much! Although the menu drawer still opens from the left. Do you have any idea on how to solve that?

6

Thanks for the info, check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.header--top-left.drawer-menu, .header--middle-left.drawer-menu {
   grid-template-areas: "heading icons" !important;
}
.menu-drawer {
  left: auto;
  right: 0;
}

And Save.

Result:

Made4uoRibe_0-1715098660174.png
Made4uoRibe_0-1715098660174.png487×645 2.96 KB

Note: I align the menu to the right and I manage to transfer the drawer also in the right. But the animation of the opening comes from the left to right. That needs to adjust some codes in your store that needs developer.

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