Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Changing logo in header while scrolling down


eduardvanpagee
Go to solution Solved by tuanphan,

Question

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

Link to post
  • Answers 24
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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.     

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

Posted Images

24 answers to this question

Recommended Posts

  • 2
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

Link to post
  • 0

Try adding to Page Header

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

 

Link to post
  • 0
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

Link to post
  • 0
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

Link to post
  • 0
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.

Link to post
  • 0

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

 

 

Link to post
  • 0
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

Link to post
  • 0
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)

Link to post
  • 0

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>

 

Link to post
  • 0
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)

Link to post
  • 0
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;
}

 

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...