Jump to content

Change header logo and make smaller when scrolling down

Recommended Posts

Im trying to make it so the logo on my site's header changes and gets smaller as I scroll down.

I found another forum thread of someone asking the same thing, and got this code from it:

/* Change logo on scroll */
.shrink .header-title-logo img {
    visibility: hidden;
	transition: all 0s ease-in-out;
.shrink .header-title-logo a {
    background-image: url(INSERT IMAGE LINK);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
	transition: all 0.2s ease-in-out;
  	max-height: 50px;

It works well, but there is one problem I can't figure out.

When scrolling back up, the logo changes back in an instant and doesnt transition like it does when scrolling down.

How do I fix this?


Website is: https://manatee-gecko-3pg9.squarespace.com/

Password is: test

Link to comment
  • Replies 2
  • Views 268
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

On 6/8/2024 at 4:05 AM, tuanphan said:

You want to make logo smaller on scroll

or make logo change to another logo on scroll?

Both. The code i put in my original post is already doing that properly. it just doesnt do it "in reverse". it kinda snaps back into place

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.