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.
2 Likes
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. waypoint-nav - Webflow
1 Like
Thank you Pablo - I got it to work after experimenting :)! Weirdly enough, my navbar on mobile stopped working…
1 Like
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
- Hide the “White” Nav bar
- 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
@Pablo_Cortes hi there, can you help me to please…i just saw this conversation, and follow the steps you put above, and it works in the section of animations but when i click save and go to the preview mode in all the screen, don’t work jaja i don’t now what im doing wrong…
Hey @WebBakersCo,
It is hard to tell you what is wrong with your animation without a read only link. But since you say it works on the interactions preview, maybe you just have to reload your browser and see if that helps. Let me know if you can share your read only link.
I reload it all ready but not change…this is the link sorry i didn’t add before
Hey @WebBakersCo,
I got it now. So you have to use a page trigger not an element trigger. Remove the current animation of your navbar, then on the interactions panel select page trigger while page is scrolling
After that you have to add color changes on percentages, so for what your want I think you should have something like this:
where the first and second values are transparent and the third and fourth values have color. Let me know how it goes.
@Pablo_Cortes hi Pablo, i just do it, holladas you now jaja…and it works perfect, thanks so much really , and have a wonderful year, thanks for the advice.
Hello @WebBakersCo,
I’m so glad it works for you now. You have a wonderful year too. Take care.
1 Like
Simple solution by few lines of code:
1 Like