Change Logo in header after scroll?

Hello - I would like to have a white logo on the homepage but when you scroll and the sticky menu changes to a white background I would like the logo to change to black. Is that possible?

Hello there,

Yes, it’s possible to do.

We can use jQuery code to alter the default logo with any image of our choice upon scrolling with jQuery code. Technically we’ll use .attr() method to manipulate the image source attribute value. Please follow the below steps. Replace with your image file URL. You’ll need to upload your image to the media library (Dashboard > Media > Add New).

  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 = '';
  var oldLogo = $('.site-logo').attr('src');
  $(window).on('load scroll', function() {
    var y = $(this).scrollTop();
    if ( y >= 107 ) {
    } else {


  1. Update


Hi kharisblank ,

This is a very elegant solution to the users needs. I feel this code could be used to solve my problem as well. The difference is, I just want my logo to disappear once the screen is scrolled down. Could this code be modified to accomplish my design goal?

Let me know, Thanks!

Rod N.

Hello Rod,

Hiding logo upon scrolling is a lot easier – we only need a couple lines of CSS code – add this code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 1025px) {
      .float-header .col-md-4 a {
        display: none;



This worked even better! Thanks for providing the solution to my problem!

Rod N.

You’re welcome Rod.

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


Hello kharisblank,

This code was my solution, but on the phone screen the logo disappears. its possible to make this code js work only on the desktop or make this code work in phone screen?