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:

  1. Make the navbar disappear
  2. Make the navbar reappear 

Make the navbar disappear

  1. Select the navbar and make sure its position is fixed to the viewport
  2. In the Interactions panel, choose Start an Animation from the When Scrolled Down menu
  3. Name it (e.g., “nav leave”)
  4. Click the plus sign next to Timed actions
  5. Under Move change the Y-axis until the navbar is outside the viewport
  6. Adjust your easing curve and duration

Make the navbar reappear

  1. Select the navbar
  2. In the Interactions panel, choose Start an Animation from the When Scrolled Up menu
  3. Name it (e.g., “nav enter”)
  4. Click the plus sign next to Timed actions
  5. Under Move change the Y-axis back to 0
  6. Adjust your easing curve and duration

Check your work in the preview.


Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top