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

Changing logo in header while scrolling down

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

Share this post


Link to post

20 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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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>

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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

Share this post


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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

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.

Share this post


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.


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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! 

 

 

Share this post


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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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)

Share this post


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>

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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)

Share this post


Link to post
  • 0

@lieslmaduro See here:

 


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


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


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


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