Reduce logo size on scroll

[KingJut]

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

[Richard]

Dear @KingJut

Cool idea! ✨However i'm cant see the Bradford logo reduce size on scroll.

Is this the correct link?

---

Talk soon

Richard

[KingJut]

Hi Richard,

Your right, this site now supersedes the original (which had it).

Do we know if there is a way todo this anyway?

[Richard]

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

https://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 🌝