Change Logo Alignment To Top Left in Dawn Theme

Store Design
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