Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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.
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
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.
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
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?
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>
This code didn't work. When i go on to collection page's the header logo is still not centered?
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>
Work!! I use margin-left: 80px for my logo. Thank you very much
Hello @munfas_uk ,
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
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:
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025