Shrink logo on scroll

Site URL: https://kazoo-fuchsia-makp.squarespace.com/

Hi! 

I'm in need of help! I would like to make my logo shrink when scrolling downwards. How can I do that? 

An example of the effect can be found here: https://www.ramme.no/no. 

The site where this should be implemented is: https://kazoo-fuchsia-makp.squarespace.com/

This tutorial seems to be what I'm looking for, but it does not work for me. 

It doesn't have to be this particular effect or transition, just a smaller logo that appears on scroll.

Any help would be appreciated! 

3 hours ago, PanickedForumgoer said:

Site URL: https://kazoo-fuchsia-makp.squarespace.com/

Hi! 

I'm in need of help! I would like to make my logo shrink when scrolling downwards. How can I do that? 

An example of the effect can be found here: https://www.ramme.no/no. 

The site where this should be implemented is: https://kazoo-fuchsia-makp.squarespace.com/

This tutorial seems to be what I'm looking for, but it does not work for me. 

 

It doesn't have to be this particular effect or transition, just a smaller logo that appears on scroll.

Any help would be appreciated! 

What sqaurespace version are you on?

 If your on 7.1, you can thank GhostPlugins for posting an easy code for this, so I didn’t have to inspect elements 😁. Let me know if the code works!

Add the following code to your customs css section located on the design menu. 
 

// Shrinking Logo On Scroll - 7.1 //

.header-announcement-bar-wrapper.shrink 
.header-title-logo img {
    max-width: 100px;
}

.header-title-logo img {
    transition: all 0.2s ease-in-out
}

Thank you for the replies so far! I'm on 7.1! 

The code doesn't work, but I also can't see the .shrink class in the inspector for some reason. Is this effect dependent on a fixed header for instance? In order for the .shrink class to be in play? 

1 hour ago, PanickedForumgoer said:

Thank you for the replies so far! I'm on 7.1! 

The code doesn't work, but I also can't see the .shrink class in the inspector for some reason. Is this effect dependent on a fixed header for instance? In order for the .shrink class to be in play? 

Well yes I would say that you would need a fixed header for the .shrink class to work. I think this because they wouldn’t see the logo shrink on scroll, unless the header was scrolling with them. Does that make sense? So I will try it with a fixed header. Do you know how to make you header fixed? If not there’s an easy way that sqaurespace lets you do it manually.😁

19 hours ago, inunzi said:

Well yes I would say that you would need a fixed header for the .shrink class to work. I think this because they wouldn’t see the logo shrink on scroll, unless the header was scrolling with them. Does that make sense? So I will try it with a fixed header. Do you know how to make you header fixed? If not there’s an easy way that sqaurespace lets you do it manually.😁

Did you solve it ?