Header Logo only appear when start scrolling

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