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

Shopify Discussion

Topic summary

Goal: Reposition Debut theme header so the menu is left-aligned, logo centered, and cart on the right; ensure proper vertical alignment and mobile behavior.

Progress/Actions:

  • Store URL shared by the OP. A contributor guided adding custom code at the bottom of theme.liquid (above ) to move the desktop menu to the left. Screenshots illustrate the code placement; exact code not visible in the thread text.
  • After initial change, OP requested vertical alignment so the left menu aligns with the centered logo and right cart. Updated code was provided, which the OP said fixed desktop.
  • Mobile issue: the hamburger (mobile menu icon) remained on the right. More code was shared; OP clarified the desired mobile layout is hamburger on the left, logo center, cart on the right.

New Request:

  • Another user asked for the same desktop layout (no search bar, menu font Lora bold and ~30% larger) and the same mobile layout; provided preview URL and password.

Status:

  • Desktop for the OP appears resolved; mobile icon alignment remains pending final adjustment.
  • Second user’s request is open.

Notes: Solutions involve theme.liquid edits; screenshots and code snippets are central to implementation.

Summarized with AI on December 14. AI used: gpt-5.
1

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!

Screen Shot 2023-07-21 at 9.26.57 PM.png
Screen Shot 2023-07-21 at 9.26.57 PM.png1323×643 85.9 KB

2

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

3

https://www.justbree.com/

4

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 tag

Moeed_0-1690012764645.png
Moeed_0-1690012764645.png1901×854 96.1 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

5

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!

6

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 tag

Moeed_0-1690013609650.png
Moeed_0-1690013609650.png1905×851 96.5 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
7

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. :grimacing:

Sorry!

8

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 tag

Moeed_0-1690014169607.png
Moeed_0-1690014169607.png208×450 51.6 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

9

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

10

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