Origin Theme align menu icon to the Right

AlbertoVoltaje · ‎02-15-2024

Good Morning. I'm trying to align the header menu hamburger icon to the right (next to the store icon), but I can't get it to align properly.

How can I properly align the menu icon to the right, next to the store icon?

I'm trying to achieve the attached file.

I'm using Orign Theme (https://themes.shopify.com/themes/origin/styles/default)

The store: https://voltaje.io/

Psw: leisag

Thank you so much.

ThePrimeWeb · ‎02-15-2024

Hey @AlbertoVoltaje,

I missed one part,

Replace the earlier code with this

<style>
header-drawer {
    grid-column: 4 !important;
    margin-left: 10px !important;
}

header.header {
    padding-right: 15px !important;
}    

.menu-drawer {
    transform: translateX(100%) !important;
    left: auto !important;
    right: 0;
}

.js details[open].menu-opening>.menu-drawer {
    transform: translateX(0) !important;
}
</style>

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb · ‎02-15-2024

Hey @AlbertoVoltaje,

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
header-drawer {
    grid-column: 4 !important;
    margin-left: 10px !important;
}

header.header {
    padding-right: 15px !important;
}    

.menu-drawer {
    transform: translateX(100%) !important;
}

.js details[open].menu-opening>.menu-drawer {
    transform: translateX(0) !important;
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

AlbertoVoltaje · ‎02-15-2024

Thank you so much @ThePrimeWeb that worked like a charm!

But now, the side panel is still opening from left instead of right:

I appreciate your help.

ThePrimeWeb · ‎02-15-2024

Hey @AlbertoVoltaje,

I missed one part,

Replace the earlier code with this

<style>
header-drawer {
    grid-column: 4 !important;
    margin-left: 10px !important;
}

header.header {
    padding-right: 15px !important;
}    

.menu-drawer {
    transform: translateX(100%) !important;
    left: auto !important;
    right: 0;
}

.js details[open].menu-opening>.menu-drawer {
    transform: translateX(0) !important;
}
</style>

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

AlbertoVoltaje · ‎02-15-2024

Thank you, I was not able to achieve this alone and you was a life-saver!

Origin Theme align menu icon to the Right