How do I move my menu to left in header for the Debut theme

[justbree]

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! 

[Moeed]

Hey @justbree 
Kindly share your Store URL and Password if enabled

[justbree]

https://www.justbree.com/

[Moeed]

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

[justbree]

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! 

[Moeed]

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

[justbree]

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! 

[Moeed]

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

[justbree]

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

[Hristina94]

Hello,

Hello,

Could you please assist me with the following?

For the header in the desktop version:

• I want the logo to be centered.
• The menu should be on the left, and the cart should be on the right, without the search bar.
• They should all be aligned with the logo.
• The menu font should be Lora, bold, and at least 30% larger.

For the mobile version:

• The menu should be on the left, the logo in the center, and the cart on the right.

Thank you in advance for your assistance!

https://mfvxxq-kt.myshopify.com/
pass:0876624960