Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Shrink logo on scroll


Go to solution Solved by inunzi,

Question

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 post
  • Answers 5
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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 insta

5 answers to this question

Recommended Posts

  • 1

 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 post
  • 1
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 post
  • 0

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? 

Edited by PanickedForumgoer
Link to post
  • 0
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 post
  • 0
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 post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...