Brooklyn Theme Replace "site-header__logo-image" with "site-header__logo-image--transparent"

Solved
JollyChoice
Tourist
3 1 1

Hello guys. I have managed to make a sticky header but what I couldn't figure out is how to make the initial logo (color) to be replaced with the transparent logo (white) when the scroll is active.

 

I have tried to play with script but this doesn't do the trick because it does not update the img src.

 

$( document ).ready(function() {
$(window).scroll(function(){
if ($(window).scrollTop() >= 300) {
$('.site-header__logo-image').addClass('site-header__logo-image--transparent');
}
else {
$('.site-header__logo-image').removeClass('site-header__logo-image--transparent');
}
});
});

 

Thanks in advance :)

KetanKumar
Shopify Partner
18918 1986 6998

Thanks @JollyChoice 

Welcome to the Shopify community!
Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
JollyChoice
Tourist
3 1 1

Thanks for the quick response, I have sent you an email with the URL and the password

0 Likes
JollyChoice
Tourist
3 1 1

This is an accepted solution.

Thanks for the info, I have spoken with one other specialist from the support, who also informed me that what I am trying to accomplish needs code and theme customization and it is "not possible with css", so I made it with css only :)

 

.site-header__logo-image{
filter: brightness(0) invert(1);
}

 

I have added it to the .fixed-header .site-header { properties so it does not affect the logo when the fixed bar is not active.

 

Cheers.

0 Likes
Richard_F
Tourist
5 1 1

Hi there

Can similar code be used to change the logo from white to black (once the scroll is active)?

Many thanks