Align Header Icons in the middle

[StudioBlank]

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.

[Made4uo-Ribe]

Hi @StudioBlank 

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

[StudioBlank]

Here www.blankstudiocy.com

[PageFly-Henry]

Hi @StudioBlank 

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

[BSSCommerce-HDL · Accepted solution]

Hi @StudioBlank, 

You can try this code by following these steps:

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

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

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

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

Here is result: 

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 😍

[StudioBlank]

This works perfect on desktop but not on mobile

[StudioBlank]

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

How do i fix that?

[BSSCommerce-HDL]

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