Show and hide navigation bar on scroll
Build a navbar interaction that responds on scroll.
We’re transitioning to a new UI, and are in the process of updating our Webflow University content.
In this lesson:
Make the navbar disappear
- Select the navbar and make sure its position is fixed to the viewport
- In the Interactions panel, choose Start an Animation from the When Scrolled Down menu
- Name it (e.g., “nav leave”)
- Click the plus sign next to Timed actions
- Under Move change the Y-axis until the navbar is outside the viewport
- Adjust your easing curve and duration
Make the navbar reappear
- Select the navbar
- In the Interactions panel, choose Start an Animation from the When Scrolled Up menu
- Name it (e.g., “nav enter”)
- Click the plus sign next to Timed actions
- Under Move change the Y-axis back to 0
- Adjust your easing curve and duration
Check your work in the preview.