Jump to content

Shrink logo on scroll

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! 

Link to comment
  • Replies 5
  • Views 1.3k
  • Created
  • Last Reply
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

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

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

Archived

This topic is now archived and is closed to further replies.

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