Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1400441
    #1400631

    Hey Anna_Tewes,

    Thank you for the inquiry.

    To make the logo disappear when the website loads and to make the header transparent only on the landing page, you’ll need to add some custom CSS code. Here’s an example of how you can achieve this effect:

    Hide the logo on page load:

    .logo {
      display: none;
    }
    

    Make the header transparent only on the landing page:

    .header {
      background-color: transparent;
    }
    

    Show the logo and change the header background color when the user starts scrolling:

    
    
    function ava_custom_script() {
    ?>
     <script type="text/javascript">
    	$(window).scroll(function() {
      if ($(this).scrollTop() > 0) {
        $('.logo').fadeIn();
        $('.header').css('background-color', 'rgba(255, 255, 255, 0.9)');
      } else {
        $('.logo').fadeOut();
        $('.header').css('background-color', 'transparent');
      }
    });
     </script>
    <?php
    }
    add_action('wp_footer', 'ava_custom_script', 20);
    

    Best regards,
    Ismael

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