All things Shopify and commerce
Hello Shopify community,
I am trying to move my menu to the left of the screen with my logo centered and my cart icon on right side of screen.
I can't figure out how to move only menu to left side of screen and padded correctly to match the alignment of the cart icon on right side.
So, "SHOP" and "ABOUT BREE" should be on left side rather than center under scribble logo. Thanks in advance!
Hey @justbree
Kindly share your Store URL and Password if enabled
Hey @justbree
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag
<style>
.site-nav {
text-align: left !important;
margin-left: 30px;
}
</style>
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Thank you Moeed. I figured out how to do that before, but how do I make it so it isn't so low on the left side. Does that make sense?
See how the cart icon on the right side is center to logo in middle? I am trying to match the menu on left side to be higher and aligned properly with logo in middle and cart icon on the right.
Hope that clarifies what I am trying to do. Thanks again!
Hey @justbree
Apologies for the confusion, you may remove the previous code and try this new code.
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag
<style>
.site-nav {
text-align: left;
margin-left: 50px;
bottom: 90px;
z-index: 99;
}
</style>
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Thank you, Moeed!
It's perfect, but I just realized the hamburger menu is still on right side when viewed in mobile version. Could you please help me make the same changes for the mobile version. 😬
Sorry!
Hey @justbree
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag
<style>
.grid.grid--no-gutters.grid--table.site-header__mobile-nav {
flex-direction: row-reverse !important;
}
</style>
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
haha Oh, I am so sorry.
I meant only the hamburger icon on left side and cart on right in mobile version.
Could you please help me make change? thank you Moeed
Hello,
Hello,
Could you please assist me with the following?
For the header in the desktop version:
For the mobile version:
Thank you in advance for your assistance!
https://mfvxxq-kt.myshopify.com/
pass:0876624960
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024