Shopify themes, liquid, logos, and UX
Hi!
I have tried a lot of fixes to try and get my header logo directly in the middle of the header on mobile. I cannot seem to resolve this.
I looked into moving the search svg logo to the left of the header, but cannot seem to do this, it just overlapped the mobile menu button.
I then implemented some css code in the header which is a bit clunky due to it being ai written and only helped minimise the icon size: sizes: .icon--medium {
width: 20px;
height: 20px;
margin: 0 0px;
}
@media (max-width: 767px) {
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 5px;
}
.header-left,
.header-center,
.header-right {
flex: 1;
display: flex;
align-items: center;
}
.header-center {
justify-content: center;
}
.store-logo--image {
max-width: 130px;
width: auto;
}
.header-left {
justify-content: flex-start;
}
.header-right {
justify-content: flex-end;
}
.utils__item--search-icon {
order: -1;
margin-right: 0px;
}
}
If anyone could please help / provide guidance I would be grateful. Currently the header logo is on the left on mobile view.
Store: www.Belascos.co.uk
Hello @jjdesign1
You can add code by following these steps
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. Paste the below code before </body> on theme.liquid
<style>
@media only screen and (max-width: 767px) {
.utils .store-logo.store-logo-mobile--inline {
margin-left: 33px !important;
text-align: center !important;
}
.store-logo--image {
max-width: 50% !important;
width: 38% !important;
margin: 0 auto;
}
.icon--header .icon {
margin: 0 !important;
}
}
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
That is very kind. Thank you.
Are you able to point me in the direction of being able to align the header logo to the banner sections below it. Perhaps I have to edit other settings to do this?
For example, the text on my banner and the announcement bar are inlined with eachother, whilst the header logo is still to the left of this.
Regardless, this solution really helped and I am very appreciative! First time doing this so not very clued up!
You can add code by following these steps
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. Paste the below code before </body> on theme.liquid
<style>
@media only screen and (max-width: 767px) {
.store-logo--image {
width: 100% !important;
margin: 0 auto;
}
.utils {
display: grid;
grid-template-areas: "left-icons heading icons";
grid-template-columns: 1fr 1fr 1fr;
align-items: center;
}
}
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
Sorry to ask, do you know how I can make it bigger. This solution has solved my issue but the logo is now very small on mobile.
Thank you
Hi @jjdesign1
Check this one.
@media only screen and (max-width: 939.98px) {
.utils .store-logo.store-logo-mobile--inline {
margin: auto !important;
}
}
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Hello @jjdesign1
Go to online store ---------> themes --------------> actions ------> edit code------->base.css/styles.css
add this code at the end of the file.
@media only screen and (max-width: 939.98px) {
.utils .store-logo.store-logo-mobile--inline {
margin: auto !important;
text-align: center !important;
}
}
and the result will be
If this was helpful, hit the like button and mark the job as completed.
Thanks
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn 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, 2025