Changing logo in header while scrolling down

Hi all,

I want to have a different logo on my header ones you scroll down. This is the case; The background of my website is dark, but if you scroll down, a white header appears. But because the background of the logo changes from dark to white, the logo is not nice on one of these backgrounds. Because of this I have created another logo and I want to add this in a way that if I scroll down, the logo also changes to the other logo with another logo. 

Basically; If I scroll down I want to see the alternate logo on my header. [See attachment] 

[I don't know if this is relevant] But, I have created the white moving header by using custom CSS

I am still building my website, but to get the best help; My website is open now at www.luz.software

Try adding to Page Header

<script>
  $(".scrollNav img").attr("src", "https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg")
</script>

On 12/24/2019 at 5:13 PM, tuanphan said:

Try adding to Page Header

<script>
  $(".scrollNav img").attr("src", "https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg")
</script>

 

Thanks for your reply @tuanphan. I have added this code to the code injection but it does not work. The logo on the nav.bar is not changing if you scroll down. Do you have any idea what I could do? 

14 hours ago, eduardvanpagee said:

Thanks for your reply @tuanphan. I have added this code to the code injection but it does not work. The logo on the nav.bar is not changing if you scroll down. Do you have any idea what I could do? 

Try inserting to Footer

Thanks for your quick reply. I have inserted the code in the footer, but still nothing happens @tuanphan

@tuanphan Cool! It worked man! Thanks a lot!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Did something happen between the last two comments? I am trying to do the same thing and it didn't work when I inserted into the CSS or the header. Just wondering if I am missing a piece! Thanks.

3 hours ago, savannahadcock said:

Did something happen between the last two comments? I am trying to do the same thing and it didn't work when I inserted into the CSS or the header. Just wondering if I am missing a piece! Thanks.

If your share link to your site & which code did you use (CSS or script code). We can check easier.

@tuanphan you're a damn star, I'm always lurking on this forum and you're generally always the one that already has the answers to all my questions!

I've inserted the following code on header, tried footer also but neither worked: 

<script>
$(window).scroll(function(){
  var scroll = $(window).scrollTop();
  if(scroll > 50){
    $('.Header').addClass('scrollNav');
  }
  else{
    $('.Header').removeClass('scrollNav');
      }
      });
</script>

<script>
$(".scrollNav img").attr("src", "https://static1.squarespace.com/static/5edb818c253cf824ff6e4ba8/t/5eef3ffb404c9c25fb6cb6c2/1592737787893/favicon-grey.png")</script>

Could you help? Website link is www.gabrielasilveira.squarespace.com and password is hello. Thank you! 

On 6/21/2020 at 6:24 PM, GabrielaS said:

@tuanphan you're a damn star, I'm always lurking on this forum and you're generally always the one that already has the answers to all my questions!

 

I've inserted the following code on header, tried footer also but neither worked: 

<script>
$(window).scroll(function(){
  var scroll = $(window).scrollTop();
  if(scroll > 50){
    $('.Header').addClass('scrollNav');
  }
  else{
    $('.Header').removeClass('scrollNav');
      }
      });
</script>

<script>
$(".scrollNav img").attr("src", "https://static1.squarespace.com/static/5edb818c253cf824ff6e4ba8/t/5eef3ffb404c9c25fb6cb6c2/1592737787893/favicon-grey.png")</script>

 

Could you help? Website link is www.gabrielasilveira.squarespace.com and password is hello. Thank you! 

 

 

Remove above, add this to Code Injection Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('.header-title-logo img').attr('src','https://beaverhero.com/wp-content/uploads/2020/05/ss-pricing-table01-min.png');
});
</script>

replace with your image url

6 hours ago, tuanphan said:

Remove above, add this to Code Injection Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('.header-title-logo img').attr('src','https://beaverhero.com/wp-content/uploads/2020/05/ss-pricing-table01-min.png');
});
</script>

replace with your image url

Thank you for getting back to me, I've replaced the code with the above but now it just makes the logo always show as the 'alternative' logo (the one I want to change to after scrolling down)

ah forgot class, try again with this

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('.shrink .header-title-logo img').attr('src','https://beaverhero.com/wp-content/uploads/2020/05/ss-pricing-table01-min.png');
});
</script>

42 minutes ago, tuanphan said:

ah forgot class, try again with this

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('.shrink .header-title-logo img').attr('src','https://beaverhero.com/wp-content/uploads/2020/05/ss-pricing-table01-min.png');
});
</script>

 

This one isn't doing anything that I can see I'm afraid 😞 (tried both header and footer injection)

Any luck @GabrielaS? I am having the exact same issue!

@lieslmaduro do you have a link to the site? I can help you out

@lieslmaduro no luck yet!

@lieslmaduro See here:

hi @GabrielaS @RyanDejaegher @tuanphananh luck?? I'm trying to do the same but with Squarespace 7.1? Any answer/fix would be hugely appreciated!

My in progress site: https://endive-swordfish-kjf7.squarespace.com

password: temppassword2020

1 hour ago, samasplen said:

hi @GabrielaS @RyanDejaegher @tuanphananh luck?? I'm trying to do the same but with Squarespace 7.1? Any answer/fix would be hugely appreciated!

My in progress site: https://endive-swordfish-kjf7.squarespace.com

password: temppassword2020

We got that working for @GabrielaS, might work for your page as well.

This is the solution I found after 2 days of trying the above (the bit i used is in part 2)

Give the guy a follow on youtube. 
 

@tuanphan, I could use your help with something similar. Trying to invert logo & header nav on scroll in SS 7.1. 

Goal is to display the logo, nav and social icons in white and have the turn black on scroll (once you see the white background). 

site: https://bison-marigold-6s6h.squarespace.com

pw: haiku

On 5/11/2021 at 3:35 AM, MariaFY said:

@tuanphan, I could use your help with something similar. Trying to invert logo & header nav on scroll in SS 7.1. 

Goal is to display the logo, nav and social icons in white and have the turn black on scroll (once you see the white background). 

site: https://bison-marigold-6s6h.squarespace.com

pw: haiku

Add to Design > Custom CSS

/* on scroll header */
header#header.shrink {
    background: black !important;
}
header#header.shrink img {
    filter: brightness(0) invert(1);
}
header#header.shrink .header-nav-list * {
    color: white;
}
header#header.shrink .header-actions * {
    fill: white;
    stroke: white;
}

Thanks a million @tuanphan. You're killing it every single time!