Solved

Align Header Icons in the middle

BlankStudio
Excursionist
38 0 14

So i changed all of my header icons to custom icons but im not sure why the icons are now misaligned.

Can someone please help me? Im stuck and i cant continue.
s.PNG

Accepted Solution (1)

BSSCommerce-HDL
Shopify Expert
733 244 255

This is an accepted solution.

Hi @BlankStudio

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

BSSTechVenture_0-1716948246073.png

 

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid 

BSSTechVenture_1-1716948254741.png

 

Step 3: Insert the below code at the bottom of the file -> Save

details-modal.header__search {
    transform: translate(-88px, -5px);
}

Here is result: 

BSSTechVenture_2-1716948295780.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 7 (7)

Made4uo-Ribe
Shopify Partner
6451 1547 1918

Hi @BlankStudio 

Can I take a look, would you mind to share your store URL? Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
BlankStudio
Excursionist
38 0 14

PageFly-Henry
Shopify Partner
1168 331 281

Hi @BlankStudio 

This is Henry from PageFly - Landing Page Builder App

 

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save

 

.header__icons {

    align-items: center !important;

}

a.header__icon.header__icon--account.link.focus-inset.small-hide {

    margin-right: 30px;

    margin-top: 10px;

}

 

Hope that my solution works for you.

Best regards,

Henry | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

BSSCommerce-HDL
Shopify Expert
733 244 255

This is an accepted solution.

Hi @BlankStudio

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

BSSTechVenture_0-1716948246073.png

 

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid 

BSSTechVenture_1-1716948254741.png

 

Step 3: Insert the below code at the bottom of the file -> Save

details-modal.header__search {
    transform: translate(-88px, -5px);
}

Here is result: 

BSSTechVenture_2-1716948295780.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
BlankStudio
Excursionist
38 0 14

This works perfect on desktop but not on mobile

BlankStudio
Excursionist
38 0 14

I removed the search icon because this happens when i click on search

How do i fix that?

ddff.PNG

BSSCommerce-HDL
Shopify Expert
733 244 255

Hi @BlankStudio, we will check it and suggest you a solution if possible.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency