PanickedForumgoer Posted October 29, 2020 Share Posted October 29, 2020 (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 October 29, 2020 by PanickedForumgoer Link to comment
2 inunzi Posted October 29, 2020 Share Posted October 29, 2020 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 inunzi Posted October 29, 2020 Share Posted October 29, 2020 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
0 PanickedForumgoer Posted October 29, 2020 Author Share Posted October 29, 2020 (edited) 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 October 29, 2020 by PanickedForumgoer inunzi 1 Link to comment
0 inunzi Posted October 29, 2020 Share Posted October 29, 2020 (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 October 29, 2020 by inunzi Link to comment
0 inunzi Posted October 30, 2020 Share Posted October 30, 2020 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
Question
PanickedForumgoer
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 PanickedForumgoerLink to comment
Top Posters For This Question
4
2
Popular Days
Oct 29
5
Oct 30
1
Top Posters For This Question
inunzi 4 posts
PanickedForumgoer 2 posts
Popular Days
Oct 29 2020
5 posts
Oct 30 2020
1 post
Popular Posts
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
5 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment