I’m in the process of building my first website using Webflow. Despite watching all 31 of the tutorial videos, it’s still somewhat overwhelming.
I really like how Yello (http://www.yelloistanbul.com/) has the navigation drop into play after scrolling past the opening slide/background. I’m assuming some of this is created by making the object (nav bar) absolute or fixed, but I’m guessing. Any help on how to accomplish this would be appreciated.
Hi @chrisgreer33,
I was stuck on the same issue yesterday, but this Webflow video explains it perfectly: http://tutorials.webflow.com/nav-appears-on-scroll
Good luck!
The problem is that the video appears to be for a previous version of the tool bar so the same steps don’t make sense.
I managed to get it working – you need to find the ‘Interactions’ panel under the 5th tab on the right (the cube).
If you post your public access link, I’ll have a fiddle and get back to you!
Thanks
Is this my public access link: https://webflow.com/design/tulsapreview
Nope, head on over to your Dashboard, then click the settings ‘cog’ next to your project. Then you’ll be taken to the settings page, scroll down and click Enable Public Link, then paste that link here.
Thanks!
EDIT: Visit this link for a tutorial on enabling your public link if you’re having trouble: How to Enable a Webflow Share Link - Webflow Tips - Forum | Webflow
Gotcha. Here it is: https://webflow.com/design/tulsapreview?preview=5651971b6ff09544e464f70322b8c004
Thanks so much for looking at it.
Ok @chrisgreer33, I wasn’t able to create a screencast video as my internet is awful right now, but here’s a step-by-step process, it’s quite simple!
1.) Double click navbar symbol so that you’ve got the ‘Navbar’ layer selected.
2.) In the right-hand panel (with your tools), click the cube (last tab). You should see the ‘Interactions’ header here.
3.) With ‘Navbar’ still selected, click to add a new interaction. Name this interaction ‘Display none’
4.) For this interaction, you need to add an ‘initial appearance’. When you’ve brought up the initial appearance options, click the crossed out eye, so that your nav will disappear). Click done.
5.) Now you’re done with the nav, next click the slider element and press your up arrow keys until you reach the ‘Home Slider’ layer (or select this layer from the layer panel).
6.) Add new interaction for the Home Slider layer, call the interaction ‘Display Nav’.
7.) Click to add a new ‘Trigger’. In this trigger window, check the ‘Affect different element(s)’ box, and type in ‘Navbar’. This means that the interactions here will affect the navbar.
8.) Next, click the ‘+’ button next to ‘Scroll Into view’. When the window pops up, click the move button (the one with the 4 arrows pointing in different directions). Set the vertical movement (bottom slider) to -100px. The nav will go out of sight. Click done.
9.) Add a Scroll OUT of view now. Click the move button again but don’t change any settings, just click the ‘X’. You’ll notice that under the Move, Scale and Rotate buttons it now says ‘Move to Origin’. This means that the nav will move to the original position once you’ve scrolled past the slider. Click the ‘Block’ button, then click done. You can play around with the 500ms setting (maybe make it 700-800ms for a smoother slide), as this is how fast the nav will slide back into view.
DONE. Now click preview to see your new nav. You won’t be able to view it in edit mode, so you’ll have view it in preview mode. Let me know if this works for you!
Thanks 
You are a life saver. Thanks so much for taking your time to outline this process for me step by step. Really, really appreciate it.
No problem, glad it worked for you :).
This topic was automatically closed after 24 hours. New replies are no longer allowed.