Streaming live at 10am (PST)

Navbar changing color when scrolling

Hi! I wonder how I can make a navbar that changes color when scrolling, depending on the section.
Exactly like www.dropbox.com have. Don’t even know where to begin.

Thanks!


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

Hello @Ludde,

Yes you can. What you need to have is a position fixed navbar, all your sections and content, and then you need to create an interaction. The interaction works like this: first select the navbar, then go to page interactions, while scrolling, new timed animation, and there you select the color of the navbar to change according to what you want. Once you start building it you will have a better picture of what I’m talking about. Good Luck.

Hey @Ludde,

I found this example on the webflow showcase page that you can clone. I think it will put you on the right track. https://webflow.com/website/waypoint-nav

1 Like

Thank you Pablo - I got it to work after experimenting :)! Weirdly enough, my navbar on mobile stopped working…

1 Like

Hello @Ludde,

I’m glad you got it to work. What seems to be the problem on mobile?

@Pablo_Cortes,

You have to press 3 times on the hamburger bar sometimes for it to come down… here’s a new Preview Link, also it’s live on http://www.pandy.co/ if you want to try it on mobile.

It doesn’t help to

  1. Hide the “White” Nav bar
  2. Dissable the animation on mobile

Hello @Ludde,

I tested on my iPhoneXr and I didn’t have to press 3 times on the hamburger to open the menu. I think you have to modify your design a little bit for the different break points. The navbar for mobile should expand on the whole menu area so maybe make it min width 50%?. Try to make the rest of your layout responsive and then the changes for the navbar will look more obvious. Let me know if you have more questions. Good Luck! BTW you website looks great, good job!

Thanks @Pablo_Cortes :)!

If you try to open/close the menu a couple of times, what happens for you then? For me it starts to act weirdly, both in Chrome and Safari on mobile. Desktop works great though. Also, when the menu turns white, when pressing the hamburger, it disappears…

I’m going to do some experimenting tomorrow and duplicate the navbar instead of the container within it and see if it helps.

Thanks again!

1 Like

Update:

I fixed the problem by making it more simple:
Instead of doing several Navbars, I created an animation just affecting the brand images and text colors. Also added a hamburger animation for mobile.

Thanks again for you help, @Pablo_Cortes!

1 Like

Hello @Ludde, that is great. I’m glad I was able to help you. Take care!