How to Show & Hide Navbar on Scroll in Webflow: A Step-by-Step Guide

Creating a navigation bar (navbar) that hides on scroll down and shows on scroll up enhances user experience by keeping important links accessible without occupying too much screen space. In this tutorial, we’ll walk you through how to implement this feature in Webflow using interactions and animations.

For a detailed walkthrough, watch our full video tutorial here.

Setting Up Your Webflow Project

1. Start a New Project:
   • Log in to Webflow and create a new project.
   • Choose a blank template to start with a clean slate.
2. Create the Basic Structure:
   • Add a Navbar component from the Add Panel.
   • Create several sections below the navbar to enable scrolling.

Watch the setup steps in our video tutorial here.

Designing the Navbar

1. Customize the Navbar:
   • Drag the Navbar component to the top of your canvas.
   • Use the Style Panel to customize the navbar’s appearance (e.g., background color, text styles).
   • Set the navbar to a fixed position so it stays at the top of the viewport as you scroll.

See how to design your navbar in our video tutorial here.

Creating the Scroll Interaction

1. Select the Navbar:
   • Click on the navbar in the Navigator panel to select it.
2. Create a New Interaction:
   • Go to the Interactions Panel and click the “+” to create a new interaction.
   • Choose “Element Trigger” and select “Scroll”.
3. Define the Interaction:
   • For scrolling down, set the navbar to hide:
     • Click on “Scroll Out of View” and set an animation to move the navbar up (out of view).
   • For scrolling up, set the navbar to show:
     • Click on “Scroll Into View” and set an animation to move the navbar down (into view).
4. Adjust Animation Settings:
   • Fine-tune the animation speed and easing to ensure smooth transitions.

Follow along with the scroll interaction setup in our video tutorial here.

Testing and Refining

1. Preview the Interaction:
   • Click on the Preview button to test your scroll interaction.
   • Scroll down to see if the navbar hides and scroll up to check if it reappears.
2. Refine the Animation:
   • If necessary, go back to the Interactions Panel and adjust the settings for a smoother experience.

Watch the testing and refining process in our video tutorial here.

Publishing Your Site

1. Publish the Project:
   • Once you’re happy with the interaction, click on the “Publish” button in the top right corner of the Webflow dashboard.
   • Choose to publish to a Webflow subdomain or a custom domain if you have one.

See the final publishing steps in our video tutorial here.

Conclusion

Implementing a show/hide navbar on scroll in Webflow is a straightforward way to enhance your website’s user experience. By following these steps, you can create a clean, functional, and aesthetically pleasing navigation bar that responds to user actions seamlessly.

Feel free to experiment with different animations and styles to match your site’s design and make your navigation stand out.

For a full visual guide, check out our complete video tutorial here.