Dawn Theme: How do I code elements on hover?

Store Design

AI-generated summary

Goal: make the cart icon in Shopify’s Dawn theme behave like the search/account icons on hover—grow in size and turn fully white.

Proposed change: add CSS targeting “.header__icon .icon:hover” with height: 3rem and width: 51px in Assets > base.scss.liquid.

Result: the change did not achieve the goal for the cart icon and caused other icons to grow more than desired. The request is to keep other icons unchanged and only have the cart icon mirror the hover behavior of the search/account icons.

Clarification from responder: the provided CSS applies hover effects to the account and search icons only, not the cart icon.

Status: unresolved. Key need is a cart-specific hover selector/effect that matches the styling of search/account icons without affecting them.

1

I would like to edit my cart icon to act as the “search button” and “account button” on hover. I want it to increase in size and turn full white.

Does anyone know the code for this?

URL: https://pleasedontbetaken.myshopify.com/

Password: lutred

Thank you!

2

@SebastianL ,

.header__icon .icon:hover {
height: 3rem;
width: 51px;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid

3

That did not work. It just makes the other icons grow way more than they already do.

I want the other icons to stay the exact same. Just want the cart icon to mirror the other icons hover behaviour.

4

@SebastianL ,

It applied only hover for this 2 icon: account and search