Show navigation only on scroll up - but hide completely for header section

Design help Animations & Interactions
1

Hi,

I’m trying to hide the nav bar while the header is visible. I have this working here: Webflow - Townhomes Test

But i’d also like to make it so that the nav bar only appears when the user scrolls back up, as in here - Show & Hide Navbar on Scroll - Webflow interactions and animations tutorial - YouTube
So basically it works just like the above tutorial, but it remains invisible for while on the header.

I’ve tried a few different ways, but they all seem to result in a flash of the nav once you scroll past the header. Any help greatly appreciated!

Thanks in advance,
Jack

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

2

This is actually a pretty simple fix that involves making sure your navbar is placed behind your hero image instead of on top of it. I recorded a quick video of the process to fix it here, but you can also follow the steps below:

  • Remove the main-nav z-index
  • Set the header-img to relative positioning
  • Make the header-nav-wrap has a z-index of 1 or more
  • Remove your trigger and replace it with a scroll page trigger
  • Make the scroll down hide your nav, while scroll up shows it