All things Shopify and commerce
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
Solved! Go to the solution
This is an accepted solution.
Hi @amandaZ2020
Welcome to the Shopify Community.
Can you share you store url and access password if you have?
Hi Sonya! - New to this. where will i find that information?
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
This is an accepted solution.
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
Thank you. This is now working!
You are amazing. Thanks
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
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.
In today’s interview, we sat down with @BSS-TekLabs to discuss practical strategies for...
By JasonH Nov 13, 2024The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024