Streaming live at 10am (PST)

Navigation Bar Appears on Scroll then Disappears


#1

Hi all!

Just need a little help with my Navigation bar.

I have a transparent nav bar at the top of the page and also have a second nav bar which isn't transparent initially set at 0%. On scroll I have it appearing at a certain div. That works fine but I am having trouble when I scroll back to the top. I cant work out how to make the second nav to disappear at the same div it appeared on.

Any ideas? (hard to explain!)


#2

post a public link to the project...
it's much easier to fix the issue when you can see it.


#4

The top nav bar is transparent onLoad...
- and change changes when you scroll down the page.

You want the top menu bar to become transparent again
- when you scroll back to the top of the form ?

Share / Post a read-only link to the project. Need to see inside the project.


#5

Thats correct, id like it to disappear again when you got to the top of the page. How do I Share / Post a read-only link to the project?


#6

#7

Thanks for explaining!

here is the link.

https://preview.webflow.com/preview/cliftonville-copy?preview=04ca61e895bb747dc689134f9bd8f1c5


#8

1) second_nav:
Change Interaction onInit
remove Display:None to Display:Block

2) top-header->menu-below-header:
remove interaction (banner)

3) top-header->menu-below-header->bistro-menu->H2 (Dining):
remove interaction (nav disappear)

4) top-background:

onScroll intoView
- add interaction - affect second-nav Opacity 0%

onScroll outofView
- add interaction - affect second-nav Opacity 100%

onHover Over
- add interaction - affect second-nav Opacity 0%

5). on Body Hover Over

video shows on top-header - change to on Body

that way… no matter what section is displayed… the menu bar will appear when the user moves the mouse

onHover Over (BODY)
- add interaction - affect second-nav Opacity 100%

See Video:

http://quick.as/14J5Cakbv


#9

Awesome. you are a life saver, Thank you


#10

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


#11

#12

#13