Jump to content

Shrink logo on scroll

By PanickedForumgoer, in Customize with code

Go to solution Solved by inunzi,

Recommended Posts

PanickedForumgoer Level 2

PanickedForumgoer

Posted
Posted (edited)

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

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

PanickedForumgoer
PanickedForumgoer

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

inunzi Level 5

inunzi

Posted
Posted
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
inunzi Level 5

inunzi

Posted
  • Solution
Posted

 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
inunzi Level 5

inunzi

Posted
Posted (edited)
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
inunzi Level 5

inunzi

Posted
Posted
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

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources