Different navbar when scrolled to top

Hello,

I’m trying to design a navbar which is different when the page it’s scrolled at the very top, and change when the page is scrolled (anywhere except specifically at the top).
What I try to achieve is this:

http://www.astrostudios.com/

I did several tests.
The first one with a Page Scrolled interaction, as described in the Webflow video “Show and Hide Navbar on Scroll” but the change is driven by any movement, not on a specific location.
In the second test, I used a Scroll Into View interaction on the hero section, but it doesn’t work either.

I’m missing something… Any idea?

And I have a second issue, related to my navbar.
I’ve made my custom navbar following this tutorial “Creating a custom portfolio Part 8/8”.
I adapted it in a full screen menu, but when I click on any nav link, the menu does not collapse and stay visible… which is problematic.
Could you help, please? :slight_smile:

My navbar contains a logo visible when the menu is closed (black one), and a variant when it’s open (white one).
What I need to modify is its aspect when the menu is closed and the page scrolled. The new logo to be used for this is “Icon-block”.

I didn’t find this question (or a suitable answer) on the forum. Sorry if it’s already discussed.


Here is my public share link: [LINK
(how to access public share link)