How to adjust header icons to make them closer on moblie

Solved

How to adjust header icons to make them closer on moblie

Aleksander22
Tourist
60 0 11

Hello,

I'm wondering how can i move the header icons closer in moblie view. My desktop version is alright but moblie verison just keeping them a litlle bit further. Please someone can help

Accepted Solution (1)
Moeed
Shopify Partner
4403 1135 1394

This is an accepted solution.

Hey @Aleksander22 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (max-width: 767px) {
.header-wrapper .header.header--mobile-center.header--has-menu > .header__icons {
    margin-right: 5px !important;
}
details-modal.header__search span {
    justify-content: end !important;
}
}
</style>

RESULT:

Moeed_0-1720706182876.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

View solution in original post

Replies 5 (5)

Moeed
Shopify Partner
4403 1135 1394

Hey @Aleksander22 

 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Aleksander22
Tourist
60 0 11

Hi, thank you for quick respond and there is url and password

URL: https://112479-08.myshopify.com

Password: mowfla

 
 
 
 
Moeed
Shopify Partner
4403 1135 1394

This is an accepted solution.

Hey @Aleksander22 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (max-width: 767px) {
.header-wrapper .header.header--mobile-center.header--has-menu > .header__icons {
    margin-right: 5px !important;
}
details-modal.header__search span {
    justify-content: end !important;
}
}
</style>

RESULT:

Moeed_0-1720706182876.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Aleksander22
Tourist
60 0 11

That was really helpful thanks for help. It's working

 

But there is antoher thing that I would change. Its region/country selector and there is a problem with selecting currency because im having there countries but the currency is only euro. I'd like to have diffrent currencies to another countries like poland - ZŁ, sweden - SEK and so on. I would be very greatful for help.

Aleksander22
Tourist
60 0 11

Projekt bez nazwy (24).pngProjekt bez nazwy (22).png