Different Nav Bar on Scroll

Design help Animations & Interactions
1

Hello community!

I am needing some design help for a site that I am working on. I have created a custom nav bar, and I am wanting the nav bar to change on scroll and stay fixed at the top. The nav bar on this site is pretty much exactly what I want to do:

https://adventures.polaris.com/

I want my logo to change to a different version, colors, and everything else change as well and it stays fixed.

Here is my share link to see what I am working on and what I have to work with. This will be for desktop only.

https://preview.webflow.com/preview/spearfish-canyon-adventures?utm_source=spearfish-canyon-adventures&preview=25ea4836f8d5a6562fad4b0546b424a4

Any help is much appreciated. Thanks!

2

Could you provide what differences you would like applied to the navbar in the fixed position?

Even if it is on a different page and then reshare your link?

BTW, on your dropdown nav items you need to add a hover off animations. The dropdowns don’t go away after you move off the top menu item.

I also see that all of your hover animations are for first position. You are missing all of the 2nd position animations.

3

here is a screencast for your review:

4

I added the nav bar that I want to change it to on the page “old home” the dropdowns there need animations as well but im more focused on getting the fixed bar first.

As far as the dropdowns not having hover off, they do but not on the trigger itself. On the drop down Div, is where they hover off. Ive been having a lot of issues with this and if you have any kind of idea on how to make these better, it would be much appreciated. The issue with giving it a hover off animation the trigger itself, is that it doesnt stay open for the user to click the links, which is why I only gave it a hover on and set the hover off on the dropdown div itself.

5

check the video I sent you, it will answer your question!

6

Just watched it and that helps a lot! thank you so much. As far as the nav bar goes, I want it to change as soon as you scroll away from the top. Just like polaris does