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: https://preview.webflow.com/preview/townhomes-a7424d-61418a1b54c143ca?utm_source=townhomes-a7424d-61418a1b54c143ca&preview=cc3da8bcd6c1bf52a753ae7eea7a0828

But i’d also like to make it so that the nav bar only appears when the user scrolls back up, as in here - https://www.youtube.com/watch?v=a2Kp4bSDCwI
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