Why is the mobile version of my header logo not aligning in the centre? It is currently left-centred

Why is the mobile version of my header logo not aligning in the centre? It is currently left-centred

jjdesign1
New Member
10 0 0

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

Replies 6 (6)

niraj_patel
Shopify Partner
2391 516 513

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>

techlyser_web_0-1721664114032.png

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
jjdesign1
New Member
10 0 0

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!

niraj_patel
Shopify Partner
2391 516 513

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>

techlyser_web_0-1721667480209.png

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
jjdesign1
New Member
10 0 0

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

Made4uo-Ribe
Shopify Partner
9867 2349 2946

Hi @jjdesign1 

Check this one. 

  1. From you Admin page, go to Online Store > Themes
  1. Select the theme you want to edit
  2. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  3. Then place the code below at the very bottom of the file.

 

@media only screen and (max-width: 939.98px) {
    .utils .store-logo.store-logo-mobile--inline { 
        margin: auto !important;
    }
}

 

  • And Save. 
  • Result:
  • Made4uoRibe_0-1721733523748.png

     

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.

GTLOfficial
Shopify Partner
769 160 169

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
16.png

If this was helpful, hit the like button and mark the job as completed.
Thanks

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh