Why does my Instagram icon hover differently in the footer?

Store Design
, , , ,
1

Hi friends!

Hoping someone can assist me in a problem I encountered. I am using the Dawn theme for my store www.day204clothing.com.

I recently set up a hover color action for the social icons in the footer so that they turn light grey when you hover over them. However, I noticed that when I hover over the Instagram icon, something strange happens. When I hover over the Instagram icon, I can hover over any part of the icon, if that makes sense. It’s not the entire icon that turns uniformly grey, but each line of the icon. The mouse pointer can hover over each line of the icon. Ideally, I want the entire symbol to turn light grey at the same time. As you can see below, you have the option to hover over any section of the Instagram icon. In comparison, the Facebook icon is uniformly grey when hovered over.

I am very grateful for your help! Please let me know if you have any questions. I am not using custom icons for the footer at this time. The only additional code I added was to change the hover color.

Screenshot 2022-10-29 at 9.53.49 PM.png

Screenshot 2022-10-29 at 9.53.57 PM.png

Screenshot 2022-10-29 at 9.55.05 PM.png

2

Hi @Day204
I just checked and found that your code is not correct.
In this case You can try follow this path:
Themes => edit code => asset => base.css
and add this code to bottom of the file base.css

.link.list-social__link:hover path {
  fill: orange;
}
1 Like
3

Thank you so much! It worked!