Navigation Help When Scrolling

UPDATE
Think I’ve solved by adding a small div as a trigger positioned absolute top left so when you scroll back to the top the animation reverts to the original navigation.

Still testing.

Hi all,

At the moment when you scroll down the page the navigation reduces and a transparent bar appears along with the hamburger (including desktop). So, a large logo goes small and you can still access the navigation hamburger.

I would like it so the transparent bar and hamburger stay small until you reach the very top of the page, then the logo goes back to the original size. I’m struggling to find the best way to do this. The interaction when you scroll down is ‘on page scrolled’.

Here is my public share link:
https://preview.webflow.com/preview/jersey-triathlon?utm_medium=preview_link&utm_source=designer&utm_content=jersey-triathlon&preview=554e30effab057ccd2dbafb333fb863a&mode=preview

Live link:
https://jersey-triathlon.webflow.io/

Many thanks

Matt