Align header icons when item is in bag

[ms-123]

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:

With items:

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

 

URL: minor-star.com

PW: brian123

 

[devcoders · 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;
}

[ms-123]

Thank you so much!

[devcoders]

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!

[ms-123]

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

[devcoders]

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;
}
}

[ms-123]

Perfect, thank you so much!

[devcoders]

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!