Change logo when scrolling down

Hi,
Sorry for the very late reply and thanks for the login, we can replace the logo image on scroll with this function, try adding this code to the end of your functions.php file in Appearance > Editor:

function custom_script() { ?>
    <script>
(function ($) { 
  $(window).scroll(function() {
    var width = $(window).width(), height = $(window).height();    
    var scroll = $(window).scrollTop();
      if (scroll > 20 && width >= 1440) {
    $('.logo a').find( 'img' ).attr('src', 'https://your-full-url.com/wp-content/uploads/2021/01/2nd-logo.png');
   } else {
    $('.logo a').find( 'img' ).attr('src', 'https://your-full-url.com/wp-content/uploads/2021/01/logofinale.svg');
   }
  });
 })(jQuery);
 </script>
    <?php
}
add_action('wp_footer', 'custom_script');

In the code you will note that it fires after a 20px scroll, which you can adjust, and it only occurs on screens larger than 1440px, this is because I’m not sure how you want to address this for mobile.
Also please correct the url in the code, I was not sure if you wanted your domain posted.
Please give this a try.

Best regards,
Mike

Hi,
Glad to hear that the code worked for you, the message:

Unable to communicate back with site to check for fatal errors, so the PHP change was reverted. You will need to upload your PHP file change by some other means, such as by using SFTP.

is a part of WordPress’s self-check, which can give false positives due to many things, but also ensure that you are trying to remove all of the code and are not removing or leaving an extra character.
That said I tried to remove the function also and received the same message, I see this message quite often with or without customizations so I would not be concerned. If you have FTP access, or cPanel “file manager” access you or I could remove this if you wish. I would recommend using FTP or the cPanel “file manager” over the WordPress built-in editor, because if the site crashes you can not use the WordPress built-in editor, but you can always use FTP.

I also checked the Site Health tool and see the error is Error: cURL error 28, based on my research I disabled the REST API: Head endpoint option in the Yoast plugin and the Site Health tool error was solved.

cURL is a server function, so there is a chance that your webhost can use the error log to make adjustments to your server settings to allow this option to be enabled. Or perhaps Yoast support has also seen this and has another solution.

To change the padding to the second image we could add the css to the jQuery like this:

$('.logo a').find( 'img' ).attr('src', 'https://your-full-url.com/wp-content/uploads/2021/01/logofinale.svg').css({ 'padding-top': '15px'});

so the full script would be like this:

function new_custom_script() { ?>
    <script>
(function ($) { 
  $(window).scroll(function() {
    var width = $(window).width(), height = $(window).height();    
    var scroll = $(window).scrollTop();
      if (scroll > 20 && width >= 1440) {
    $('.logo a').find( 'img' ).attr('src', 'https://your-full-url.com/wp-content/uploads/2021/01/2nd-logo.png').css({ 'padding-top': '0px'});
   } else {
    $('.logo a').find( 'img' ).attr('src', 'https://your-full-url.com/wp-content/uploads/2021/01/logofinale.svg').css({ 'padding-top': '15px'});
   }
  });
 })(jQuery);
 </script>
    <?php
}
add_action('wp_footer', 'new_custom_script');

*Please note that I added zero padding to the first image to help clear the second image padding on scrolling back to the top, without it you might notice the padding if you quickly scrolled up & down over and over 🙂
Please feel free to adjust the urls and padding to suit.

Best regards,
Mike

Hi,
Good try, you were almost there, between the two css rules you needed a comma like this:
$('.logo a').find('img').attr('src','https://url.com/wp-content/uploads/2021/01/2nd-logo.png').css({'padding-top':'20px','width':'200px'});
Please give this a try.

Best regards,
Mike

Hi,
Thanks, currently your code is like this:
$('.logo a').find( 'img' ).attr('src', 'xxx/uploads/2021/01/2nd-logo.png').css({ 'padding-top': '20px','width':'max-content'});
try removing the width part of the css and only use the padding part in the jQuery, then use this css in your Quick CSS to make the logo 200px:

.logo {
	width: 200px !important;
}

The reason is that you want the logo 200px wide always, but the script is only fired on-scroll, so css in the Quick CSS would work better. The padding css is only for the second image (small one) to center it vertically, and is used only on scroll so the css in the jQuery is the correct approach.
I hope this helps.

Best regards,
Mike

• This reply was modified 3 years, 10 months ago by Victoria.

Hi,
Sorry for the late reply and thanks I believe I understand better now. please try this script instead, you will notice two new lines targting the logo width, on scroll it will be 200px, after scroll it sets to 115px, which is the current width.

function change_logo_on_scroll(){
  ?>
  <script>
(function ($) { 
  $(window).scroll(function() {
    var width = $(window).width(), height = $(window).height();    
    var scroll = $(window).scrollTop();
      if (scroll > 20 && width >= 900) {
    $('.logo a').find( 'img' ).attr('src', 'https://your-site.com/wp-content/uploads/2021/01/2nd-logo.png').css({ 'padding-top': '20px'});
    $('.logo').css({ 'width': '200px'});
   } else {
    $('.logo a').find( 'img' ).attr('src', 'https://your-site.com/wp-content/uploads/2021/01/logofinale.svg').css({ 'padding-top': '0px'});
    $('.logo').css({ 'width': '115px'});
   }
  });
 })(jQuery);
 </script>
<?php
}
add_action('wp_footer', 'change_logo_on_scroll');

also check the url in the code above.

Best regards,
Mike

Hi,
Glad we were able to help with this, we will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

Best regards,
Mike