Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #1276447

    Hi there,

    I want to have a different logo when I scroll down. I don’t use a transparent header as my header needs to be white. I just want the logo to change.

    I already tried methods from other threads but nothing works…

    For example:

    add_filter('avf_logo_subtext', 'kriesi_logo_addition');
    function kriesi_logo_addition($sub) {
        $sub .= '<img src="http://kriesi.at/wp-content/themes/kriesi/images/logo.png"/>';
        return $sub;
    }

    with this:

    .header-scrolled .logo > a > img { display: none !important; }

    Using these codes only makes 2 logos appear below each other…

    And this code does absolutely nothing:

    .header-scrolled .logo img { opacity: 0; }
    .header-scrolled .logo a {
    background-image: url(/wp-content/uploads/2017/01/logo-ruff-cycles-transp-2-sm.png);
    background-size: contain;
    background-repeat: no-repeat;
    }

    Any help please?

    • This topic was modified 3 years, 10 months ago by DeMamp.
    #1276815

    Hi DeMamp,

    Thanks for providing the code that you tried.
    The last one should work, can you give us a link to your site? (you can put it in private content) so we can try to inspect why it’s not working.

    Best regards,
    Nikko

    #1278812

    Hi,

    • This reply was modified 3 years, 10 months ago by DeMamp.
    #1279385

    Hi DeMamp,

    The link with the token did not work. Please update it.

    Best regards,
    Victoria

    #1279479

    I reinstalled the plugin and the link should be working. Thank you!

    #1279508

    Hi DeMamp,

    Your header is not shrinking so it does not get the class header-scrolled. In this case, the css will not work, you need to replace it with JavaScript.

    Best regards,
    Victoria

    #1279562

    Hello,

    Oh I see. Seems more complicated than I thought…

    Let say I choose the Enfold option to shrink the header, is there a less complicated way (with CSS) to make it look like it’s barely shrinking? Basically a way to adjust the shrinking size of the header.

    Thanks for the support :)

    EDIT: Well apparently it does not work because the shrinking header does not support overlapping logos… Any fix for that?

    • This reply was modified 3 years, 10 months ago by DeMamp.
    #1280438

    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

    #1282472

    Thank you so much. The code works perfectly.

    However, I am now getting critical PHP errors: when I try to remove the code from functions.php, I get this error: “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.”

    I’m also getting new WordPress errors when checking the Site Health tool:
    1. “The REST API request failed due to an error”
    2. “Your site could not complete a loopback request”

    I disabled all my plugins but it doesn’t change anything.

    I find it hard to believe that the cause of these problems is the javascript code but it literally happened right after I put it in functions.php. I was able to add it but right after I tried to remove it, it didn’t allow me to.

    Also, is there a way to change the padding and width of the second logo without affecting the first? I tried to edit “#top .logo” but obviously the changes affect both logos.

    Thank you!

    • This reply was modified 3 years, 10 months ago by DeMamp.
    #1282612

    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.
    2021-02-21_095250.jpg
    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

    #1282695

    Hi Mike,

    Thank you so much for your help. I can’t tell you how grateful I am.

    I’ll just use cPanel to edit the files from now on. I’m glad the issue isn’t really one.

    The code works perfectly, thank you! I tried to adjust the width as the second logo is a bit too small, unfortunately I can’t seem to find out how to do so. I tried a few things myself such as:
    $('.logo a').find( 'img' ).attr('src', 'https://url.com/wp-content/uploads/2021/01/2nd-logo.png').css({ 'padding-top': '20px' 'width': '200px'});

    or

    $('.logo a').find( 'img' ).attr('src', 'https://url.com/wp-content/uploads/2021/01/2nd-logo.png').css({ 'padding-top': '20px'}) ({'width': '200px'});

    But since I’ve never coded before these are probably silly attempts… I also tried to Google “JQuery” “width” “script” but I didn’t find anything resembling your code. If you could tell me what to add to adjust the width that’d be perfect.

    Thanks again for your great support!

    • This reply was modified 3 years, 10 months ago by DeMamp.
    #1282758

    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

    #1282782

    Hi Mike,

    Thank you! Unfortunately I don’t see any change.

    I wanted to adjust the width because when I inspect the element and change the width in CSS (#top .logo) the logo does change size. Maybe it’s different with jQuery? I tried a few things such as “width: 100%”, “size: 200px”, I tried to play with the left and right padding and margins, etc. but the logo remains the same size.

    Thanks a lot

    • This reply was modified 3 years, 10 months ago by DeMamp.
    #1282824

    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.
    #1282917
    This reply has been marked as private.
    #1283669

    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

    #1283700

    Thank you so much Mike, that works great! :)

    (The thread can be closed now)

    #1283830

    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

Viewing 18 posts - 1 through 18 (of 18 total)
  • The topic ‘Change logo when scrolling down’ is closed to new replies.