Logo size transparant header and scrolled

Hey jannnnnneke,
Perhaps this will help, Try adding this code to the end of your functions.php file in Appearance > Editor:

function custom_logo_script(){
  ?>
  <script>
(function($){
$(window).load(function(){
$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  if (scroll >= 1) {
   $('.logo .subtext img.alternate').hide();
  } else {
   $('.logo .subtext img.alternate').show();
  }
 });
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_logo_script');

Best regards,
Mike

Hi,
So it is working only when scrolling down, correct?
I tried adjusting for the scroll back up, but I will have to research more and perhaps try something else.
Try removing it and changing your css to this:

#header.av_header_transparency .logo img.alternate {
    height: 175%;
    max-height: 350px;
    overflow: visible;
}

Otherwise please include an admin login in the Private Content area, so I can test when I find a new solution.

Best regards,
Mike

Hi,
Thank you for the login, I commented out your css and adjusted the function to this:

function custom_logo_script(){
  ?>
  <script>
(function($){
$(window).load(function(){
	$('#header.av_header_transparency #header_main .av-logo-container .inner-container').css({ 'height': '175%' });
$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  if (scroll >= 5) {
  	$('#header.av_header_transparency #header_main .av-logo-container .inner-container').css({ 'height': '100%' });
   $('.logo .subtext img.alternate').attr("src","https://lnsc.nl/lnsc2020/wp-content/uploads/Logo-LNSC2020-240.png");
 } else if (scroll <= 5){
 	$('#header.av_header_transparency #header_main .av-logo-container .inner-container').css({ 'height': '175%' });
   $('.logo .subtext img.alternate').attr("src","https://lnsc.nl/lnsc2020/wp-content/uploads/Logo-LNSC-2020-240.png");
   
 } else {
 	$('#header.av_header_transparency #header_main .av-logo-container .inner-container').css({ 'height': '175%' });
   $('.logo .subtext img.alternate').attr("src","https://lnsc.nl/lnsc2020/wp-content/uploads/Logo-LNSC-2020-240.png");
   
  }
 });
});
})(jQuery);

</script>
<?php
}
add_action('wp_footer', 'custom_logo_script');

result:
via GIPHY

please clear your browser cache and check.

Best regards,
Mike

Hi,
I tried adjusting again, with this solution I added a little fade animation to hide the transformation,
this is the new functions.php code:

function custom_logo_script(){
  ?>
  <script>
(function ($) { 
  $(window).scroll(function() {    
      var scroll = $(window).scrollTop();
      if (scroll >= 1) {
          $("#header").addClass('scrolled');
      } else {
         $("#header").removeClass('scrolled');
      }
  });
  })(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_logo_script');

this is the new css:

#header.av_header_transparency #header_main .av-logo-container .inner-container {
height: 175% !important;
overflow: visible;
  animation-name: fadeInOpacity!important; 
  animation-timing-function: ease-in !important; 
  animation-duration: 1.5s!important; 
}
#top #header.scrolled img.alternate{
        -webkit-animation-name: slideDown;
        -webkit-animation-timing-function: ease-out;
        -webkit-animation-duration: 0.5s;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-fill-mode: forwards;
 
}
@keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes slideDown{
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 0;
  }
}

please clear your browser cache and check.

Best regards,
Mike