Header icons

[Hanaa83]

How to make the header icons ( login, cart, search, whish list) close to each other and the same size to the right in my home page store in Refresh Theme for mobile vision?

[BSSCommerce-B2B]

Hi @Hanaa83
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

[Hanaa83]

https://zurishubstore.com/

[BSSCommerce-B2B]

Hi @Hanaa83 ,

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

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

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

@media (max-width: 800px) {
    summary.header__icon.header__icon--search.header__icon--summary.link.focus-inset.modal__toggle {
        top: 0 !important;
        right: 0 !important;
    }
}

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

[Hanaa83]

Thank you for your help. It makes the icons the same size, but I still need them closer to each other on the right, like in the photo I attached. Could you help?

[BSSCommerce-B2B]

Sure

Try this code:

@media (max-width: 800px) {
    summary.header__icon.header__icon--search.header__icon--summary.link.focus-inset.modal__toggle {
        top: 0 !important;
        right: 0 !important;
    }
    .header__icon, .header__icon--cart .icon {
        width: 3.4rem !important;
    }
    header.header {
        padding-right: 10px !important;
    }
}

result:

[Hanaa83]

where should i add this code?

[BSSCommerce-B2B]

like the previous instructions that I showed you.

like this comment: https://community.shopify.com/post/2650755