Show & Hide Navigation bar on Scroll - Framer no-code tutorial

Create your free Framer account: www.framer.com/?via=tonjrv
Get the Appverse template for free: tonjrv.lemonsqueezy.com/
In this video, we'll guide you through the process how you can show and hide navigation bar on scroll. Making your website interactiveengaging. Whether you're a beginner or an experienced designer, this step-by-step tutorial will help you add a touch of interactivity to your website.
Chapters:
00:00 Intro
00:32 How to Add Navigation Bar to your site
00:48 How to Show and Hide the Navigation Bar On Scroll
01:45 Final
Don't forget to like the video if you find it helpful and subscribe to our channel for more Framer tutorials and design inspiration.
_________________________________________________________
Find me on other channels:
Twitter/X: / tonjrv
Instagram: / tonjrv
Threads: www.threads.net/@tonjrv
________________________________________________________
If you have any questions or suggestions, please leave them in the comments section below. Let's dive into the world of interactive design with Framer!

[@adammann42]

Just tried this, worked perfectly. Thanks for the videos 👍

[@tonjrv]

Awesome to hear that mate! 🔥

[@eba-rave7509]

Thank you again, Toni, for sharing such valuable info with all of us! This tutorial was exactly what I was looking for for my project! 🙌🌟

[@tonjrv]

Awesome to hear that and super happy to hear that this was useful! 🔥

[@AkinsRealm]

Hi Toni, I was checking Framer tutorials on the community, saw your interactive nav menu tutorial there, when I clicked the tutorial, saw the notification of this new tutorial looks like posted just now, thank you for useful content, watching now! 🙌

[@tonjrv]

Awesome to hear that mate, you must've been the first one to see the new video! 🔥
Btw, if you have any questions, or ideas for new videos feel free to reach out.

[@AkinsRealm]

@@tonjrv Haha that might be true, I must be the first one to see :) I started to check Framer a while ago and loving it, since I recently learned/figured out creating a nav for scroll sections, even though your tutorial is more comprehensive I might create a tutorial myself :) Thanks again for the tutorials and of course I'll ask & tell you about questions/ideas whenever I have! 👏

[@timlind1663]

I tried, but when I am on my homepage and click in the menu to another section down below, it also disappears. I only want it to disappear if I am scrolling, not when I am using the menu. Does anyone know how to fix this?

[@purnjayparmar]

Quite helpful, recently I have seen it on newly redesigned Google Chrome site and it’s really amazing, thanks 💥

[@tonjrv]

Thanks, awesome to hear that! Best part is how easy it is to implement with Framer🔥

[@MarcinBauer]

How to make the menu appear on hover when it's out of view?

[@tonjrv]

Great question! I haven't tried it, but I think you need two variants for this.
And you have to add interaction between these two to make it work.
I can try to play around with this at some point 👍

[@bennystuehler]

there is a slight problem when the navbar is sliding to the top, the content in the navbar area is not clickable anymore. do you have a fix for this?

[@tonjrv]

Hi not sure if I understood correctly. Do you mean that when you move your pointer back to the top of the green you'd like the nav bar to come back? ✌️