Align header icons when item is in bag

Solved

Align header icons when item is in bag

ms-123
Excursionist
17 0 5

Hi there,

 

I'm trying to vertically align the header icons when an item is in the bag. When there are no items, the alignment is fine but it doesn't adjust when there are items in the bag.

 

No items:

Screenshot 2025-02-01 at 5.33.21 PM.png

With items:

 

Screenshot 2025-02-01 at 5.31.23 PM.png

^ the cart icon is now too close to the login icon

 

URL: minor-star.com

PW: brian123

Accepted Solution (1)

devcoders
Shopify Partner
925 116 235

This is an accepted solution.

Hello @ms-123 

Go to Online Store, then Theme, and select Edit Code.
Search for assets/base.css Add the provided code at the end of the file.

.header__icon:has(.cart-count-bubble) {
  left: 12px;
}

 

devcoders_0-1738480214908.png

 

Shopify Developer: Helping eCommerce Stores

If you need assistance with your store, feel free to contact us at devcodersp@gmail.com
WhatsApp No: +91 8516919310 If my assistance was helpful, please consider liking and accepting the solution. Thank you!

View solution in original post

Replies 7 (7)

devcoders
Shopify Partner
925 116 235

This is an accepted solution.

Hello @ms-123 

Go to Online Store, then Theme, and select Edit Code.
Search for assets/base.css Add the provided code at the end of the file.

.header__icon:has(.cart-count-bubble) {
  left: 12px;
}

 

devcoders_0-1738480214908.png

 

Shopify Developer: Helping eCommerce Stores

If you need assistance with your store, feel free to contact us at devcodersp@gmail.com
WhatsApp No: +91 8516919310 If my assistance was helpful, please consider liking and accepting the solution. Thank you!
ms-123
Excursionist
17 0 5

Thank you so much!

devcoders
Shopify Partner
925 116 235

Hello @ms-123 

You're very welcome! I'm thrilled to hear that you're pleased with the outcome. Don't hesitate to reach out if you need further assistance.

like and accepting the All solution. Thank you!

Shopify Developer: Helping eCommerce Stores

If you need assistance with your store, feel free to contact us at devcodersp@gmail.com
WhatsApp No: +91 8516919310 If my assistance was helpful, please consider liking and accepting the solution. Thank you!
ms-123
Excursionist
17 0 5

Hi, actually I have one more question. On mobile, it's now too close to the right side of the page when there's an item in the cart. Is there a way to have it adjust to have it further to the left when there's an item in the cart? It looks good when there's no item in cart

Screenshot 2025-02-02 at 11.40.53 AM.png

devcoders
Shopify Partner
925 116 235

Hello @ms-123 

Go to Online Store, then Theme, and select Edit Code.
Search for assets/base.css Add the provided code at the end of the file.

@media (max-width: 768px) {
.header__icon:has(.cart-count-bubble) {
left: 5px;
}
}



devcoders_0-1738515561706.png

 



Shopify Developer: Helping eCommerce Stores

If you need assistance with your store, feel free to contact us at devcodersp@gmail.com
WhatsApp No: +91 8516919310 If my assistance was helpful, please consider liking and accepting the solution. Thank you!
ms-123
Excursionist
17 0 5

Perfect, thank you so much!

devcoders
Shopify Partner
925 116 235

Hello @ms-123 

You're very welcome! I'm thrilled to hear that you're pleased with the outcome. Don't hesitate to reach out if you need further assistance.

like and accepting the All solution. Thank you!

Shopify Developer: Helping eCommerce Stores

If you need assistance with your store, feel free to contact us at devcodersp@gmail.com
WhatsApp No: +91 8516919310 If my assistance was helpful, please consider liking and accepting the solution. Thank you!