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 was provided this code, which relatively worked but as you can see in the photo below, the logo is still not aligned in the centre like the announcement bar text and banner text. Hence I was wondering if anyone has some suggestions, maybe any code which moves the search icon to the left of the header banner etc? Help would be immensely appreciated.
Here is the code I was provided previously which results in the photo below;
In theme.liquid:
@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;
}
}
Hello @jjdesign1
Can you please share the store url ? so i can check and fix the issue.
Hi, thanks for the reply.
Store: www.belascos.co.uk
Hi @jjdesign1 This is what I am seeing at my end
So do you want the logo to be small on the mobile and the search icon in left hand side?
Here is the code for putting your search icon in left hand side
#shopify-section-sections--22537271378184__header .utils__item--search-icon {
position: absolute;
order: -1;
left: 36px;
}
Please follow the steps:
- Login in shopify admin.
- Click on the Online Store.
- Then click on the button next to Customize in live Theme.
- Click Edit Code.
- Search theme.liquid in the code in left hand side in your theme.
- Add the following code in the bottom of the file above tag
Result:
If you need to decrease the size of logo then please let me know, I will provide you the code regarding the same.
If you will unable to implement the same then I’m happy to do this for you, let me know. I can implement the code changes so that this will work well for you.
Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!
Best Regards
Sahil
