Different logo for float menu when scrolling down

Hello there,

To accomplish it, try doing the below steps:

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/another-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);
    }
  });

});

4. Update

Replace https://yoursite.com/path/to/another-logo.png with your valid logo URL.

Regards,
Kharis

Thank you Kharis!

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

One more question!

Now, on mobile devices the logo is white on default. We want to change that for a red version. How does that happen?

Se we need to change the red version of logo for the mobile devices but still keep that white version for bigger screens like you helped me last week.

Br,
Jesse

Hello Jesse,

Try replacing the code I suggested with this one. And adjust the logo image URLs as specified on newLogo and mobileLogo variables.

jQuery(function($) {

  var newLogo = 'https://yoursite.com/path/to/another-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);
    }
  });

  /* Mobile Logo */
  var mobileLogo = 'https://yoursite.com/path/to/mobile-logo.png';
  
  if ( matchMedia( 'only screen and (max-width: 1024px)' ).matches ) {
    $(window).on('load scroll', function() {
      $('.site-logo').attr('src',mobileLogo);
    });
  }
  
});

Regards,
Kharis

That worked like a charm! Thank you a lot Kharis!

Br,
Jesse

Great!

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