Making the Wishlist icon on the header color adaptive to the background

[Ronla1]

Hi,

I would like to make the wishlist heart icon adaptive to the background color like the search and the cart icon next to it.
Also, the margin between the heart and the search icon is too small. I would like to make it the same as the margin between the search and cart icon.

Link to the website:
https://sassysusa.com/

Thank you 

[Artzen_tech]

Hi @Ronla1 
Its Artzen Technologies! We will be happy to help you today.

Please add the below CSS to your CSS file.

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find Your CSS file

4) Add the following code in the file.

svg.Vtl-WishlistHeader__HeartIconWrapper {
    fill: white!important;
    margin-right: 10px;
}

svg.Vtl-WishlistHeader__HeartIconWrapper .is-sticky {
  fill: black!important;
  margin-right: 10px;
}

Below is the Screenshot for the same.

Let me know if need further assistance
Regards,
Artzen Technologies

[Ronla1]

Hi @Artzen_tech ,

First of all, thank you so much.

But I need the color to be adaptive and transform when scrolling.
Just like the icons next to it.
Also, I need the 'number of items badge' on the icon to work the same.

This image shows the before and after scrolling:

[websensepro]

HI, @Ronla1.

Follow These Steps.

Goto Online store > Assets > Edit code > find Base.css File and paste the code mentioned below.

svg.Vtl-WishlistHeader__HeartIconWrapper {
    fill: #fff !important;
}

.header:hover svg.Vtl-WishlistHeader__HeartIconWrapper {
    fill: black !important;
}

Result:

Hover-effect-header

If I managed to help you then, don't forget to Like it and Mark it as Solution!

[Ronla1]

Hi @websensepro 
I can't find Base.css anywhere

[websensepro]

Please search the theme.css and style.css .

[oscprofessional]

Hello @Ronla1 

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->app.css>Add this code at the bottom.

.Vtl-WishlistHeader {
    padding: 0 10px;
}