Jump to content

Change logo when I scroll down

Recommended Posts

Hi. Change logo color or change to another logo?

On 4/30/2021 at 11:55 PM, pa_whitecar said:

Site URL: https://asparagus-wombat-zrzl.squarespace.com/config/

Hi!

I would like my logo to change when I scroll down. Having the more detailed when i'm at the top of the website and when I scroll down, the simpler one.

Thanks1

 

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

Link to comment
On 5/5/2021 at 9:34 AM, pa_whitecar said:

circus

Add to Design > Custom CSS

/* Change logo on scroll */
.shrink .header-title-logo img {
    visibility: hidden;
}
.shrink .header-title-logo a {
    background-image: url(https://cdn.pixabay.com/photo/2020/02/01/20/05/hummingbird-hawkmoths-4811285__340.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

 

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

Link to comment
  • 8 months later...
On 2/2/2022 at 6:59 AM, SaniceMarlow said:

Hi @tuanphan, thank you for posting the solution, it works great.

I was wondering if you knew how to make the transition to the second logo more smooth? More like fade-in or similar. So that the image doesn't instantly just swap out.

Thanks for your help.

Try this new code

/* Change logo on scroll */
.shrink .header-title-logo img {
    visibility: hidden;
	transition: all 0.3s;
}
.shrink .header-title-logo a {
    background-image: url(https://cdn.pixabay.com/photo/2020/02/01/20/05/hummingbird-hawkmoths-4811285__340.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
	transition: all 0.3s;
}

 

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

Link to comment
On 2/3/2022 at 11:27 PM, tuanphan said:

Try this new code

/* Change logo on scroll */
.shrink .header-title-logo img {
    visibility: hidden;
	transition: all 0.3s;
}
.shrink .header-title-logo a {
    background-image: url(https://cdn.pixabay.com/photo/2020/02/01/20/05/hummingbird-hawkmoths-4811285__340.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
	transition: all 0.3s;
}

 

Wow, this looks so much better, thank you! I really like how it slides in from the side. 

Do you think it's possibly to make it so that the full logo disappears straight away? 

Right now the replacement logo (hallmark) slides across the full logo, but it would be great if the first logo disappeared sooner so there wasn't as much overlap.

Thank you!

Link to comment
On 2/6/2022 at 6:49 AM, SaniceMarlow said:

Wow, this looks so much better, thank you! I really like how it slides in from the side. 

Do you think it's possibly to make it so that the full logo disappears straight away? 

Right now the replacement logo (hallmark) slides across the full logo, but it would be great if the first logo disappeared sooner so there wasn't as much overlap.

Thank you!

Try this code

/* Change logo on scroll */
.shrink .header-title-logo img {
	transition: all 0.3s;
	content: url(https://cdn.pixabay.com/photo/2020/02/01/20/05/hummingbird-hawkmoths-4811285__340.jpg);
}
.header-title-logo img {
	transition: all 0.3s;
}

 

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

Link to comment

Okay so this is what ended up working to remove the overlap on the two logos:

/* Change logo on scroll */
.shrink .header-title-logo img {
visibility: hidden;
transition: all 0s;
}
.shrink .header-title-logo a {
background-image: url([insert]);
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
transition: all 0.3s;
}

Just had to remove the first transition. Thank you @tuanphan!

Link to comment
  • 1 month later...

@tuanphan I've used your code, but I'm on Brine 7.0 so I'm wondering if it's different, as it's not working.

I also have Css/JS that is changing the rest of the nav, to give a fixed nav. I used these instructions, if that helps:
https://squarecamp.com/custom-code-tips/how-to-set-up-a-fixed-navigation-on-brine

My site is https://tan-squid-5y4k.squarespace.com/ PW: mirrors
(I've taken the code above out for the time being).

I'm trying to change the logo to a white version on scroll (when the banner colour changes to grey). 
This is the link to the white logo file: 
https://static1.squarespace.com/static/62257055f6ce454c50472daf/t/622a53c967a05326e32179ec/1646941130203/Antique-Mirror-Glass_logo.png

Link to comment
On 3/11/2022 at 2:43 AM, TheBrandMethod said:

@tuanphan I've used your code, but I'm on Brine 7.0 so I'm wondering if it's different, as it's not working.

I also have Css/JS that is changing the rest of the nav, to give a fixed nav. I used these instructions, if that helps:
https://squarecamp.com/custom-code-tips/how-to-set-up-a-fixed-navigation-on-brine

My site is https://tan-squid-5y4k.squarespace.com/ PW: mirrors
(I've taken the code above out for the time being).

I'm trying to change the logo to a white version on scroll (when the banner colour changes to grey). 
This is the link to the white logo file: 
https://static1.squarespace.com/static/62257055f6ce454c50472daf/t/622a53c967a05326e32179ec/1646941130203/Antique-Mirror-Glass_logo.png

Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function(){
 var visibleTop = 30;
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
      if ( scroll >= visibleTop ) {
           $('header.Header').addClass('tuan');
        }
        else {
            $('header.Header').removeClass('tuan');
        }
  });
function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
    }
});
</script>
<style>
  .tuan img {
    content: url(https://static1.squarespace.com/static/62257055f6ce454c50472daf/t/622a53c967a05326e32179ec/1646941130203/Antique-Mirror-Glass_logo.png);
}
</style>

Disble Ajax Loading if the code doesn't work

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

Link to comment
  • 10 months later...
On 2/7/2022 at 2:33 AM, tuanphan said:

Try this code

/* Change logo on scroll */
.shrink .header-title-logo img {
	transition: all 0.3s;
	content: url(https://cdn.pixabay.com/photo/2020/02/01/20/05/hummingbird-hawkmoths-4811285__340.jpg);
}
.header-title-logo img {
	transition: all 0.3s;
}

 

Hi Tuan,

This is working great - but how can I alter it so that the new logo is also smaller than the original logo?

Thanks!

Link to comment
On 2/13/2023 at 1:08 AM, Deferris said:

Hi Tuan,

This is working great - but how can I alter it so that the new logo is also smaller than the original logo?

Thanks!

Change it to this

/* Change logo on scroll */
.shrink .header-title-logo img {
	transition: all 0.3s;
	content: url(https://cdn.pixabay.com/photo/2020/02/01/20/05/hummingbird-hawkmoths-4811285__340.jpg);
	max-height: 50px;
}
.header-title-logo img {
	transition: all 0.3s;
}

(I added max-height: 50px;)

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

Link to comment
  • 1 month later...

Hi,

I have used this code to switch logos upon scroll and make the logo smaller once I scroll down. However, when I'm on the mobile version of my website, the logo does the opposite (gets larger upon scrolling). Is it fixable? And if not,  how do I only apply this code to the desktop version?

Link to comment
On 4/2/2023 at 4:56 PM, KotrynaR said:

Hi,

I have used this code to switch logos upon scroll and make the logo smaller once I scroll down. However, when I'm on the mobile version of my website, the logo does the opposite (gets larger upon scrolling). Is it fixable? And if not,  how do I only apply this code to the desktop version?

What is site url? We can check mobile code 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!)

Link to comment
9 hours ago, KotrynaR said:

I'm not sure if I can share it here

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

You may find How to post a forum question post useful.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
On 4/6/2023 at 1:40 AM, KotrynaR said:

Hi,

the website is here: https://goldfish-contrabass-4nj8.squarespace.com/

The password: sitin


Thank you very much!

Don't remove any code in your current code. Add this to Design > Custom CSS

@media screen and (max-width:767px) {
.shrink .header-title-logo img {
    max-height: 30px;
}
}

 

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

Link to comment
  • 1 year later...
On 10/18/2024 at 9:03 AM, LetterAndInk said:

Hi @tuanphan! I know this is an old thread, but I just implemented this code and it's almost perfect. Is there a way for the transition to the primary logo when you scroll back to the top to be smoother as well? Right now there's a slight pause and then it snaps back into place.

Which code did you use in this thread?

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

Link to comment

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.