Solved

I added custom icons in the header but the search and login icon are overlapped

Yash234
Shopify Partner
16 0 5

I added custom icons in the header but the search and login icon are overlapped does anyone know how can i fix that?

STORE URL : https://b58128-e6.myshopify.com/

Yash234_1-1710932408056.png

as you can see its not proper 
please help me out

 

Accepted Solution (1)

Vinsinfo
Shopify Partner
175 60 53

This is an accepted solution.

@Yash234 As per your coding structure, we need to update padding value for the search icon to prevent the icons overlapping, please follow below steps and let me know whether it is helpful for you.

 
1. From admin, go to "Online Store" -> "Themes".
2. Click action button from the current theme and select "Edit code".
3. Locate "base.css" file and find the code ".header--top-center > .header__search".
4. Update padding-right value to 70px like below attached image.

 

padding-right: 70px !important;

 

 

Vinsinfo_0-1711022510776.png

 

5. Save the file.
 
Now, it will display as shown in below image.
Vinsinfo_2-1711022607146.png

 

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

View solution in original post

Replies 3 (3)

Vinsinfo
Shopify Partner
175 60 53

This is an accepted solution.

@Yash234 As per your coding structure, we need to update padding value for the search icon to prevent the icons overlapping, please follow below steps and let me know whether it is helpful for you.

 
1. From admin, go to "Online Store" -> "Themes".
2. Click action button from the current theme and select "Edit code".
3. Locate "base.css" file and find the code ".header--top-center > .header__search".
4. Update padding-right value to 70px like below attached image.

 

padding-right: 70px !important;

 

 

Vinsinfo_0-1711022510776.png

 

5. Save the file.
 
Now, it will display as shown in below image.
Vinsinfo_2-1711022607146.png

 

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.
Yash234
Shopify Partner
16 0 5

man you are such a G tysm!

Yash234
Shopify Partner
16 0 5

Yash234_0-1711093041162.png

in mobile view the text is kinda messed do you know how can i fix this up?