How to centre header logo on mobile?(dawn theme)

Store Design
, , ,

Topic summary

A Shopify store owner using the Dawn theme needs help centering their header logo on mobile devices. The logo appears off-center because icons on the right side push it leftward.

Solutions Provided:

  • PageFly-Victor and GemPages both suggested adding custom CSS code to theme.liquid (before </head> or </body>):
    • Use margin-left with pixel values (20px suggested initially) to push the logo back toward center
    • Apply media query targeting mobile screens (max-width: 767px)
    • Target .header__heading element

Implementation Issues:

  • Initial code worked on homepage but failed on other pages (collections)
  • PageFly-Victor provided updated code to override collection page styling
  • Final outcome unclear, though one user (@wavebuilder) confirmed success using margin-left: 80px

Additional Request:

Another user (@HELDERWRLD) asked for similar help, wanting to bring header icons closer together to fix logo positioning on their site.

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

how would we centre our header logo on mobile? for some reason our header logo isn’t centre of the page on mobile. if you could help us that would be highly appreciated.

our website: www.munnafashion.com

2

Hi @munfas_uk

This is Victor from PageFly - Shopify Page Builder App

I have checked on your page and seems like the logo has center already. But you can see it is not center because of on the right side, there are 3 icon that push the logo to the left.

PageFlyVictor_0-1677030470669.png
PageFlyVictor_0-1677030470669.png1920×882 271 KB

In this case you can leave it like that or you can use my code to push the logo back.

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

You can decrease or increase the 20px value to match with your requirement.
Hope this can help you solve the issue

Best regards,

Victor | PageFly

1 Like
3

Hello @munfas_uk ,

You can follow these steps:

  1. Go to Online Store->Theme->Edit code

GemPages_0-1677031136085.png
GemPages_0-1677031136085.png400×193 29.2 KB

  1. Open your theme.liquid file, paste the below code before

GemPages_1-1677031169860.png
GemPages_1-1677031169860.png1366×957 70.7 KB

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

1 Like
4

hello this code worked
@media screen and (max-width: 767px){
h1.header__heading {
margin-left: 20px;
}
}

however, when i load a page other than the home page its seems to not be centered?

5

Hi @munfas_uk No worries, please replace the old code with this new one, that will fix the issue
6

This code didn’t work. When i go on to collection page’s the header logo is still not centered?

7

Hi @munfas_uk I found it doesnt work because on collection page something has override the code that i gave you, please try this for me
8

Hello @GemPages @PageFly-Victor can you also help me?

The icons on my mobile header made the logo slide left. I want to bring the icons more close and fix the logo position.

My site: https://diversusoficialsite.myshopify.com/

Pass: Diversusoficial

Will show you an example:

IMG_8234.PNG
IMG_8234.PNG1290×2796 476 KB

9

Work!! I use margin-left: 80px for my logo. Thank you very much