I am trying to set the hover effect on both icons on the sidebar to turn red (#EF4136) when they are hovered over. The cart icon does, but the login icon does not. Anyone have any guidance? Thanks!
https://mimihalinew.myshopify.com/
PW: mimihali2024
I hope you’re doing well.
We need to use the SVG icon format to change the color on the hover of the icon, as it is easier to change the color. You already have the cart icon as an SVG, but the user icon is rendered as an image, so you’re unable to change its color. No worries, here is the CSS solution.
Just add this CSS to your base.css file in the theme code editor:
.sidebar__responsive-handles a:hover .icon img {
filter: invert(31%) sepia(44%) saturate(3118%) hue-rotate(342deg) brightness(100%) contrast(89%);
}
If this solution worked kindly like this reply and mark it as a solution and if you need any expert help you can contact me