Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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;
}
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;
}
Thank you so much!
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!
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
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;
}
}
Perfect, thank you so much!
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!
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025