Jump to content

Shrink logo on scroll

Go to solution Solved by inunzi,

Recommended Posts

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! 

Edited by PanickedForumgoer
Link to comment
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?

Link to comment
  • Solution

 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
}
Link to comment
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.😁

Edited by inunzi
Link to comment
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 ?

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.