How can i center my header logo on mobile?

[HELDERWRLD]

Hello

I would like to know if anyone can help to center the logo on my mobile header please?

I want the icons on the right to go more to the right so the logo can be centered. I will show an example.

Also would like to know if anyone knows how to change the language text to the icon like the example?
Website: https://diversusoficialsite.myshopify.com/
password: diversusoficial

[HELDERWRLD]

Hello @comercioservice
Thank you so much for helping me. It worked but my cart logo is too small now. Please can you help me fix it?

Also would like to know if you know how to extend my main page banner to the bottom so my image can cover the white/grey space also

[HELDERWRLD]

It also changed on my desktop, i only want to change mobile, my desktop was perfect

[BSSCommerce-B2B]

HI @HELDERWRLD ,

I have reviewed your requirement, you just need to edit css script and the issue will be resolved. You can follow my instructions!

Step 1: Go to Admin → Online store → Theme > Edit code:

Step 2: Search for the file base.css. And add this code snippet to the end of the file.

@media only screen and (max-width: 768px) {
   .header {
     padding: 5px !important;
     grid-template-columns: 2fr 1fr 2fr !important;
   }
   a.header__heading-link.link.link--text.focus-inset {
     scale: 1.7 !important;
   }
}

Step 3: Save and reload page

The result will be:

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir!

[HELDERWRLD]

Hello @BSSCommerce-B2B

Thank you so much it worked. But i would also like to put the icons on the right a little bit more together. Also the hamburger menu went too far to the left because of the code.

[BSSCommerce-B2B]

HI my friend @HELDERWRLD ,

You can try this code, I haved fixed as your requirement to put the icons on the right a little bit more together and center your logo as image:

@media only screen and (max-width: 768px) {
    .header__icons {
        width: 100px !important;
    }

    .header {
        padding: 2px 2px !important;
        grid-template-columns: 2fr 2fr 2fr !important;
    }
}

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

It’s such my honor to help you, bro!

[HELDERWRLD]

It didn’t work too well, the icons went too far to the right that broke and created a white line and also the menu went too far to the left