Help - Dawn Drawer menu on right for desktop version

[amandaZ2020]

Hi 

I want to have the hamburger menu on the dawn theme on the desktop shown on the right-hand side. I can't seem to find any code.

Can anyone help, please? 

Thank you 

[Sonya_2025]

Hi @amandaZ2020 

Welcome to the Shopify Community.

Can you share you store url and access password if you have?

[amandaZ2020]

Hi Sonya! - New to this. where will i find that information? 

[Sonya_2025]

The store url is a domain which point to your store. It is like .....myshopify.com

[swym]

Hello AmandaZ2020, 

It's good practice to create a copy of your theme and work on that to preview the changes before applying, especially if you are editing the raw code. Alternatively, you can also use the Shopify theme editor’s versions to revert to previous versions, but it is not recommended if you are making multiple changes.

Now to answer your specific question on moving the menu drawer to the right side for the desktop version, please follow the steps below: 

1. Open the code editor, as shown in the screenshot below.  

2. Create a snippet called ‘custom-menu-drawer-styles’ and add the below code: 

  <style>
     @media only screen and (min-width: 990px){
       .header--top-center.drawer-menu {
         grid-template-areas: "left-icons heading icons menu"; 
         grid-template-columns: 1fr auto 1fr auto;
       }
       header-drawer #menu-drawer {
         left: unset; 
         right: 0; 
         transform: translateX(0);
       }
       .header--top-center header-drawer {
         grid-area: menu;
         margin-left: 5px; 
       }
    }
  </style>

3. Include the ‘custom-menu-drawer-styles.liquid’ file in your “theme.liquid” file.
    Add the following include code to your theme.liquid file.

{% render 'custom-menu-drawer-styles' %}

It would look something like below: 

4. Done? Now save the file, and try previewing to confirm if the changes work for you.  In the reference above, it looks something like below:

I hope this helps!

Regards,
Abhishek from Swym

[amandaZ2020 · Accepted solution]

Hi @swym 

It didn't work unfortunaltely. I even restarted with a fresh Dawn template: 

  

[swym]

Hi @amandaZ2020, 
The earlier solution I suggested was based on your header layout with the initial screenshot that you shared. 
Can you please update your header layout using the customization settings, as shown in the screenshot below: 

 
If it still does not work out, then please update your header layout using the customization settings (aligning logo and other components) and once you are done, please share your store URL, so that I can share the exact solution with you.

Regards, 

Abhishek from Swym

[amandaZ2020]

Thank you. This is now working!

You are amazing. Thanks 

[swym]

Hello AmandaZ2020,

Thank you for confirming that the solution worked! If you found it helpful, could you please give it a like (👍)? Your feedback is greatly appreciated!

Thanks again for reaching out!

Best regards,

Abhishek from Swym

[drinkbrodys]

Thanks for posting this.  Super helpful.  

One quick question, what would I modify in the code above to have the logo on the left (top left) and the burger with the other icons on the right?

I changed the code where it says 'top-center' to 'top-left'.  It moved the icons and menu to the right, but the logo stayed center.