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?
Topic summary
A Shopify store owner using the Refresh Theme seeks to adjust header icons (login, cart, search, wishlist) on mobile view to make them uniform in size and positioned closer together on the right side.
Solution Provided:
- Navigate to Shopify Admin → Online Store → Theme → Edit code
- Locate base.css, theme.css, styles.css, custom.css, or theme.scss.liquid
- Insert custom CSS code at the bottom targeting mobile screens (max-width: 800px)
Implementation Steps:
- First code snippet standardizes icon sizes using
.header__iconselectors withwidth: 3.4remand positioning adjustments - Second code snippet adds
padding-right: 10pxto.headerclass to bring icons closer together
Current Status:
The initial code successfully made icons uniform in size, but required additional CSS to achieve the desired spacing. The support team provided follow-up code and referenced previous instructions for implementation guidance. The discussion includes visual examples showing the desired outcome versus current state.
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.
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
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?
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:
where should i add this code?
like the previous instructions that I showed you.
like this comment: https://community.shopify.com/c/technical-q-a/header-icons/m-p/2650755/highlight/true#M168993
