Change Logo Alignment To Top Left in Dawn Theme

Store Design

Topic summary

A user seeks to align their logo to the top left of the header in the Dawn theme, with navigation menu to the right, despite the theme settings showing ‘Logo Left’.

Initial Solutions Offered:

  • Custom CSS code added to theme.liquid file (partially successful—logo moved left but not aligned with navigation)
  • Suggestion to use built-in theme settings: Desktop logo position set to ‘Middle left’ (did not resolve the issue)

Working Solution:
Custom CSS code added to theme.css file that:

  • Hides the mobile menu button on desktop
  • Sets logo width to 20% and menu width to 80%
  • Adds left padding to menu for proper spacing
  • Uses media query to apply only on desktop (min-width: 750px)

Additional recommendation provided to remove excess white space from the logo image file itself.

Status: Issue resolved for original poster. A subsequent user reports the same solution did not work for their store and requests assistance.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Hi

I have an issue - I want to move the logo to the left side of the header but it is showing up in the center on the desktop even though the setting say ‘Logo Left’.

Thanks in advance

www.kivaskin.com

1 Like
2

Hey @atjames92

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-1686159156313.png
Moeed_0-1686159156313.png1903×651 101 KB

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

Best Regards,
Moeed

3

Thank you for responding! I added the code and the logo is now left but still not aligned with the navigation menu. Looking for it to look similar to the attached photo

IMG_E1AD220BFA1F-1.jpeg
IMG_E1AD220BFA1F-1.jpeg1170×260 24.5 KB

(sorry if I wasn’t clear).

4

Hi @atjames92

You do not need a code to adjust the position of you logo since this already an added option to your theme.

  1. From you Admin page, go to Online store > Themes > Customize
  2. Click the header in your left hand side
  3. Assign the Desktop logo position to Middle left

made4Uo_0-1686160362207.png
made4Uo_0-1686160362207.png1900×870 155 KB

1 Like
5

Thank you for responding! The deskop logo position is set to ‘Left’ and navigation layout set to ‘Inside Header’ but still not showing logo to left and navigation menu to right. I’ve tried playing around with the setting but no luck

Screen Shot 2023-06-07 at 1.56.50 PM.png
Screen Shot 2023-06-07 at 1.56.50 PM.png2610×1098 310 KB

6

@atjames92 , do this tofix it in 20 seconds:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > theme.css and paste this at the bottom of the file:
@media (min-width: 750px){
    .site-header-main>button{
    display: none !important
}

/* logo */
.site-header-main > *:nth-child(2){
    width: 20% !important;
    position: relative;
    z-index: 2;
}

/* menu */
.site-header-main > *:nth-child(3){
    width: 80% !important;
    padding-left: 40px !important;
    z-index: 1;
}
}

diego_ezfy_0-1686185302027.png
diego_ezfy_0-1686185302027.png1900×394 36.1 KB

Also your logo has a lot of white space in it (which may be why it’s pushing the menu down).

I’d recommend taking a look at the following tutorial to address that issue. It will improve the looks of it.

If it helps you please click on the “like” button and mark this answer as a solution!

Thank you.

Kind regards,
Diego

1 Like
7

That worked - thank you soo much!!

8

Hey Diego,
I tried the same solution but it didn’t work for me. Could you help me with the same as well.

Thanks & regards

Lisse Stitch