Replace logo on scroll

Hello there,

Please try to follow the below instruction:

1. Install and activate the TC Custom JavaScript plugin
2. Go To Appearance > Custom JavaScript
3. Paste the following code into the provided box

jQuery(function($) {

  var newLogo = 'https://yoursite.com/path/to/your/new-logo.png';
  var oldLogo = $('.site-logo').attr('src');
  
  $(window).on('load scroll', function() {
    var y = $(this).scrollTop();
    if ( y >= 107 ) {
      $('.site-logo').attr('src',newLogo);
    } else {
      $('.site-logo').attr('src',oldLogo);
    }
  });

});

In the line near the top, replace:

https://yoursite.com/path/to/your/new-logo.png

to your new logo image URL path.

4. Update

Once you’re done you’d need to clear all site caches.

Regards,
Kharis

Thanks it worked!

What if I also want to change the menu font color? Can I add these 2 lines?
var black and $(‘#mainnav’).attr(‘src’,black);

` var newLogo = ‘https://test.noverek.com.mx/wp-content/uploads/2017/07/noverek4.png’;
var oldLogo = $(‘.site-logo’).attr(‘src’);
var black = {‘color’: ‘#000’};

$(window).on(‘load scroll’, function() {
var y = $(this).scrollTop();
if ( y >= 107 ) {
$(‘.site-logo’).attr(‘src’,newLogo);
$(‘#mainnav’).attr(‘src’,black);
} else {
$(‘.site-logo’).attr(‘src’,oldLogo);
}
});

});`

Hello there,

You can use the below CSS code:

.site-header.float-header {
  background-color: #000;
}

To apply it to your site, add it to Appearance > Customize > Additional CSS from your site dashboard.

Regards,
Kharis

That changes the background, what i meant is the font color on scroll to make it black.

Hello there,

I am sorry for suggesting incorrect code. Try this one, please.

.site-header.float-header #mainnav .menu > li > a {
   color: #000;
} 

Regards,
Kharis

You’re the best! Thanks.

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis