I was playing around recently with this style nav where it starts below a hero portion at first and then becomes sticky once it reaches the top of the browser. I’m pretty pleased with the result and it’s all done in Webflow without custom code AND using only one navbar.
How it’s made:
- 1 navbar (symbol)
- 2 different wrappers for the symbol (1 static, 1 fixed)
- Initial View interaction on the fixed wrapper to hide it on load
- 1 interaction on the hero div with 2 scroll triggers
Trick is to use interactions with 0 transition time.
Here’s the share link for anyone who wants to take a peak under the hood.