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

[leightt1]

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

[PageFly-Victor · Accepted solution]

Hi @leightt1 

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.

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 </head> 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 </head>

<style>
@media screen and (max-width: 767px){
h1.header__heading {
margin-left: 20px;
}
}
</style>

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

[leightt1]

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

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

[PageFly-Victor]

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

<style>
@media screen and (max-width: 767px){
h1.header__heading, .header__heading-link {
margin-left: 20px;
}
}
</style>

[leightt1]

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

[PageFly-Victor]

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

<style>
@media screen and (max-width: 767px){
h1.header__heading, .header__heading-link {
margin-left: 37px !important;
}
}
</style>

[GemPages]

Hello @leightt1 ,

You can follow these steps: 
1. Go to Online Store->Theme->Edit code

2. Open your theme.liquid file, paste the below code before </body>

    <style>
      @media (max-width: 767px ) {
        .header header-drawer {
            width: calc(100% / 3);
        }        
        .header h1.header__heading {
          width: calc(100% / 3);
        }        
        .header .header__icons {
          width: calc(100% / 3);
        }        
        .header {
            display: flex;
        }
      }
    </style>

I hope the above is useful to you.

Kind & Best regards, 
GemPages Support Team

[HELDERWRLD]

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: