Hi all,
I'm trying to work out how I can reduce the size of the logo when scrolling down the page.
An example is this — https://radford.co
-
Reduce logo size on scroll
-
Dear @KingJut
Cool idea! ✨However i'm cant see the Bradford logo reduce size on scroll.
Is this the correct link?
Talk soon
Richard
-
Hi Richard,
Your right, this site now supersedes the original (which had it).
Do we know if there is a way todo this anyway?
-
Dear @KingJut
There would be a difference based on what is needed.
Do you scroll and then i get's smaller once, E,g
Top of page > Logo=100px
25% down page > Logo=50px
Or does it shrink gradually in relation the the specific scroll E.g
Top of page > Logo=100px
1% further down > Logo=99px
1% further down > Logo =98px etc
This would need to be custom coded by you, adding the code within > Lay options > Custom CSS & HTML >
https://laytheme.com/documentation/custom-css-styling.html
https://www.w3schools.com/howto/howto_js_shrink_header_scroll.asphttps://stackoverflow.com/questions/28676253/changing-div-height-on-scroll
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale()
For targeting the site title has a class called
sitetitle
E.g.sitetitle{ // insert CSS here }
Best
Richard 🌝
