Fixed Navbar Show/Hide links

Hello I have a question I’ve been trying to reproduce the Nav bar interaction I’ve seen on the Start Learning at Treehouse for Free so basically on scroll down it hides the main nav bar and show the “Free trail button” while fix to the top of window and scroll up it show the main nav. Is this interaction possible in Webflow.

Any help would be much appreciated.

Thanks in-advance.

Yes, it is possible, by using interaction with SCROLL trigger, which will effect Container with your Navlinks. About Button changing it’s form will be not so easy (because there is no “changing classes” interaction for now), but still possible.

Hi @anfernee, If you have a site in Webflow that you are working on to reproduce this, we may be able to help make some suggestions: Share a read-only link | Webflow University

One idea to check out, is to create two different menus, and layer those on top of each other. One menu would have the trial button with border and one without.

Then apply an interaction to the top layer menu (the one with the trial button without border) to perhaps fade out and move up, and then applying a step in the interaction to make the second menu visible with some interaction.

Don’t be afraid to experiment, and to share your read-only link, that is one of the best ways to reproduce different kinds of effects :slight_smile:

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.