Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1416035

    Hello,

    I want to change the logo when scrolling. Is this possible?

    Right now there is a white background with a logo. When scrolling, the logo becomes smaller with a white background.

    I want to keep the background and only change the logo when scrolling.

    #1416129

    Hey justvisible,
    Thanks for your patience and the link to your site, I see that you are not using a child theme, so I would recommend installing the WP Code plugin to install the following snippet, then add a new snippet, in the top right corner use the PHP snippet as the code type:
    Enfold_Support_2680.jpeg
    then add this code and save:

    function change_logo_on_scroll() { ?>
      <script>
    (function ($) { 
      $(window).scroll(function() {
        var scroll = $(window).scrollTop();
          if (scroll > 20) {
        $('.logo a').find( 'img' ).attr('src', 'https://massplaner.de/wp-content/uploads/2023/07/EICHENHAUS-Schreinerei-Planungsbuero-Logo-2017_CMYK_randlos-300x169.png');
       } else {
        $('.logo a').find( 'img' ).attr('src', 'https://massplaner.de/wp-content/uploads/2023/07/eichenhaus-schreinerei-planungsbuero-logo-2017-mobil_poster_.png');
       }
      });
    })(jQuery);
    </script>
      <?php
    }
    add_action('wp_footer', 'change_logo_on_scroll');

    In this example I found a different logo in your footer to use, so when you scroll the snippet will change your top logo and then back again when to scroll to the top, feel free to change the logo url’s to suit, the first url is the after scroll url, and the second is your current logo.
    Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.

    Best regards,
    Mike

    #1416268

    i would do that via svg logo – and just with shrink event.
    there are classes added ( or removed ) if header changes. So no additional script is needed.

    #1416273

    on your initial page there is a svg Logo on top right. ( The “S” from Schreinerei is not well verctorized – if you know the Font-Types you can create a good svg logo again.

    if you look to the DOM of that svg ( svgs are xml based ) you see that i have your brand in an extra group with ID: “Bildmarke”
    you can influence inline svgs via quick css!

    #1416274

    or – even better to have both parts of your logo inside the svg code:

    Structure:

    you see that the Text-Logo has fill-opacity of zero – you can change that by quick css to 1 and the other to zero

    #1416276

    see result here – ( it is up to you how to place path inside that svg )
    https://clean.webers-testseite.de/eichenhaus/

    it just uses the header-scrolled class to change the logo inside:

    #top #header  #Bild-Logo,
    #top #header  #Text-Logo {
      transition: all 1s ease;
    }
    #top #header.header-scrolled #Bild-Logo {
      fill-opacity: 0;
    }
    #top #header.header-scrolled #Text-Logo {
      fill-opacity: 1 !important
    }

    and with the same logo – on transparency change fill option:

    #top #header:not(.header-scrolled).av_header_transparency  #Eichenhaus-Logo .eh0 {
      fill: #fff
    }

    see Startpage of the link above

    #1416394

    you can download the logo from above and use it! I do remove now from the example page – and from my initial Test Page your logo except from the link:
    https://clean.webers-testseite.de/eichenhaus/

    If you have seen it – i will remove my solution for it.

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.