How to remove the hover effect from the icons

[CreatorTim]

Hi, when I hover over the icons for the magnifying glass, login, and cart in the header they slightly enlarge. How can I remove this?

Here’s my store: https://1049xn-ya.myshopify.com/

Thanks,
Tim

[EstherBui · Accepted solution]

Hi CreatorTim 

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file

.header__icon:hover {
   scale: 0.94 !important;
}

Best,
Esther

[CreatorTim]

Thank you man!

[DaisyVo]

Hi @CreatorTim 

To complete your requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section.

.header__icon:hover .icon, .modal__close-button:hover .icon {
    transform: scale(1) !important;
}

I hope this helps

Best,

Daisy

[CreatorTim]

Thank you!

[tinedgt]

hey, what if you want to add the hover effect to a custom cart icon? is it doable?