scaling logo on scroll

Hello Tracy,
this is unfortunately outside the scope of the theme support offer, but you can try using something like this via a child theme to force the fixed header’s logo to shrink after scrolling 320 pixels down:

$(document).on('scroll', function() {
  if ($(document).scrollTop() >= 320) {
    $('.site-header.fixed-header img.logo-fullsize').css('max-width', '180px');
  } else {
    $('.site-header.fixed-header img.logo-fullsize').css('max-width', '100%');
  }
});

Alternatively, you can add the code via a plugin like this one if you’re not using a child theme.

Thank you very much. I am an ‘expansion pack’ buyer if that makes a different to the level of support, I totally understand if this is outside of scope.

I’m not using a child theme. So the code you’ve given me above and the ‘wp coder’ plug in, is that all I need to do – is put that code that you’ve provided above into the wp-coder’? Am I right in understanding that this will still be technically a swapping of one to the other rather than a SCALING down in size? Just want to understand before I begin! Thank you!!

I added this in wp-coder but it’s just the same. I added the code in the JS and got the shortcode, then put this in ‘text’ on a new test page, after trying it on other pages, it’s just the same. Is there anything else I can try? When you scroll on the page you can see both logos and two navigation bars so I’d really like to resolve this if possible. Thank you!

Please try this code instead:

$str(window).scroll( function() {
  if ($str(document).scrollTop() >= 320) {
    $str('.site-header.fixed-header img.logo-fullsize').css('max-width', '180px');
  } else {
    $str('.site-header.fixed-header img.logo-fullsize').css('max-width', '100%');
  }
});

Thank you so much!!! This worked and I’ve adjusted the 320 to a lower figure so it can happen sooner!

ONE LAST QUESTION ON THIS please? Do I need to add the wp-coder shortcode into each page individually or is there a global place I can add it so it’s applied on every page? At the moment I just put it on my ‘testing’ page within a text editor https://pantoloons.com/testing/

You can try this plugin to be able to add the shortcode into the footer menu, for example ??

Excellent!!!!???????????? Thank you very much!!! This site complete, on with my next Bento. Thank you very much for the support.