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

Solved

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

munfas_uk
Explorer
69 0 10

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

Accepted Solution (1)

PageFly-Victor
Shopify Partner
7865 1786 3127

This is an accepted solution.

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

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

View solution in original post

Replies 8 (8)

PageFly-Victor
Shopify Partner
7865 1786 3127

This is an accepted solution.

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

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

munfas_uk
Explorer
69 0 10

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
Shopify Partner
7865 1786 3127

Hi @munfas_uk  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>
munfas_uk
Explorer
69 0 10

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

 

PageFly-Victor
Shopify Partner
7865 1786 3127

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

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

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

GemPages
Shopify Partner
5625 1262 1266

Hello @munfas_uk ,

 

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

GemPages_0-1677031136085.png

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

GemPages_1-1677031169860.png

    <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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
HELDERWRLD
Pathfinder
150 0 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