Help - Dawn Drawer menu on right for desktop version

Solved

Help - Dawn Drawer menu on right for desktop version

amandaZ2020
Excursionist
41 2 8

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 

 

amandaZ2020_0-1712710394449.png

 

Accepted Solution (1)
amandaZ2020
Excursionist
41 2 8

This is an accepted solution.

Hi @swym 

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

 

Snippet.jpg

Snippet2.jpg

  

amandaZ2020_0-1712729069380.png

 

View solution in original post

Replies 9 (9)

Sonya_2025
Shopify Partner
274 34 50

Hi @amandaZ2020 

Welcome to the Shopify Community.

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

Please let me know if it works by giving it a Like or marking it as a solution!
Feel free to reach out. EMAIL ME  
Motivate me by  PAY ME
amandaZ2020
Excursionist
41 2 8

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

 

Sonya_2025
Shopify Partner
274 34 50

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

Please let me know if it works by giving it a Like or marking it as a solution!
Feel free to reach out. EMAIL ME  
Motivate me by  PAY ME

swym
Trailblazer
135 30 64

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.  

 

swym_0-1712726292060.png

 

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: 

swym_1-1712726436194.png

 

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:

    

swym_2-1712726466690.png

 

swym_3-1712726481388.png

 

I hope this helps!

Regards,
Abhishek from Swym

 

 

- Appreciate the assistance. Show your approval with a Like! And when your question finds its answer, seal the deal by marking it as an Accepted Solution!
- Our Solutions: Wishlist Plus | Swym Back in Stock Alerts | Swym Gift Lists and Registries
amandaZ2020
Excursionist
41 2 8

This is an accepted solution.

Hi @swym 

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

 

Snippet.jpg

Snippet2.jpg

  

amandaZ2020_0-1712729069380.png

 

swym
Trailblazer
135 30 64

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: 

swym_0-1712729355439.png

 
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

 

- Appreciate the assistance. Show your approval with a Like! And when your question finds its answer, seal the deal by marking it as an Accepted Solution!
- Our Solutions: Wishlist Plus | Swym Back in Stock Alerts | Swym Gift Lists and Registries
amandaZ2020
Excursionist
41 2 8

Thank you. This is now working!

 

You are amazing. Thanks 

 

swym
Trailblazer
135 30 64

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

- Appreciate the assistance. Show your approval with a Like! And when your question finds its answer, seal the deal by marking it as an Accepted Solution!
- Our Solutions: Wishlist Plus | Swym Back in Stock Alerts | Swym Gift Lists and Registries
drinkbrodys
Visitor
3 0 0

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.