Hide navbar when reach top of the page

Hello :slight_smile:

As you can see in this preview: http://visaopura.webflow.io/post/5-great-web-design-resources the nav bar shows when the user scrolls up.

But I want that the nav bar hides when the page reach the top.

Can someone please help me? Thanks

https://preview.webflow.com/preview/visaopura?utm_source=visaopura&preview=ff67962eb5df9bed24e61cb3b7bd4c2c


Here is my public share link: LINK
(how to access public share link)

@Mauricio_C_G_Pereira Have you taken a look at this tutorial on webflow university? I just used it to reveal a navigation when a user got to a certain part of the page and it works perfectly!

Thank you @sarahdarr.
Yes I saw. And it’s more or like what I want. The difference is that I want the nav bar to hide again when the page reach the top, and in that example the nav bar remains.

1 Like

What page is your interaction currently on so I can take a look in your preview?

Thank you @sarahdarr; the page is “blog posts template”

@Mauricio_C_G_Pereira Try using the “While page is scrolling” interaction instead of page scrolled interaction. That will help you set animations based on which way the user is scrolling at at what part of the screen they are on. You can set 0% to move the nav on the y axis -100px to hide it at the top.

Thanks @sarahdarr.
Yes, it could be, but that also shows the nav bar when the user scrolls down, and I don’t want that.
basically I want the navbar to show only when the user scrolls up, and when the page reach the top, the navbar hides.
I even tried to move the navbar when the hero div appears, but that also isn’t a solution.
I’m stuck with no ideias :slight_smile:

Were you able to find the answer to your question?
I am stuck with the same problem.
My top nav bar has a transparent background.
My sliding nav bar has a black background.
So even if i enter a higher z-index for the top nav-bar, the black one is still visible behind it.
Any answer would be greatly appreciated

No @Onyx_Elizer!
Didn’t get any help from the support and forum!
I gave up using Webflow in this project and moved to Yootheme for Wordpress.
Sorry!

@Onyx_Elizer
I have solution i’ll post screenshots later.

basically,

Body
-Navbar
–BG Trigger Layer z=0
—Flex Abs 100 z=0
—Trigger anchor offset px from abs top z=0

Assign IX2 to Trigger anchor,

I’ll post screenshots later with capture video example later

2 Likes

Hi Miekwave, any chance you could upload those screenshots? :sunglasses:

Just say to your Nav Bar hide when Header scrolled into view. Directly saying: choose Header → Pick Scroll into view trigger → Create Show/Hide animations and apply them to your Nav Bar

2 Likes

Hi! I’m trying to solve the same problem. I tried @steinebel’s suggestion but it doesn’t seem to work since the Header is already in view on page load. Has anyone figured out a solution to this? Thanks!

Is this the interaction you are looking for? https://david-lin-testsite.webflow.io/shownavbar

Yes! Thank you @Davidlin_ch12. Did you create that with Webflow interactions only or did you add custom code?

1 Like

Awesome! This was a quick test with Webflow interactions only.

.

The trick is to use two different effects for each trigger. In my example I used the move interaction on the page scrolled trigger and opacity + show/hide on the scroll into view trigger. Add the scroll into view trigger on the top element. (In my case the hero element) When scrolled into view it should hide the nav and when scrolled out of view it should show nav.

Hope this helps

2 Likes

Hi, I’m having the same problem. Thank you for your solution @Davidlin_ch12 !
Could you provide a read-only link?
I really wish I could use the same type of animation for both triggers though :confused:
I guess I need custom code for that :woman_shrugging:

Is this what you mean? (Check the tablet breakpoint)

https://preview.webflow.com/preview/the-transmitter-02?utm_medium=preview_link&utm_source=designer&utm_content=the-transmitter-02&preview=c20c35e0db539798ded2b1454cb141b3&mode=preview

Thanks for the tutorial