Jump to content

Changing logo in header while scrolling down

Go to solution Solved by tuanphan,

Recommended Posts

Posted

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

 

Website if you scroll down.PNG

Website NOT scrolling down.PNG

Posted (edited)

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

Edited by eduardvanpagee
adding website link
  • 2 weeks later...
Posted
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? 

 

current code injection.PNG

Posted
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted

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

  • Solution
Posted
3 minutes ago, eduardvanpagee said:

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

Remove the code and add this to Home > Design > Custom CSS

.scrollNav .Header-branding img {
    visibility: hidden;
}
.scrollNav .Header-branding {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

image.thumb.png.aacc8367acec3b69a845a30170b23e46.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted

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

  • 5 months later...
Posted

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.

Posted
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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted

@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! 

 

 

Posted
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted
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)

Posted

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted
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)

  • 2 weeks later...
  • 5 months later...
  • 4 months later...
Posted
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.