Streaming live at 10am (PST)

Help with Navigation Element & Interaction


#1

We recently purchased a Webflow theme for a project, and I am working to modify the navigation to work with the client logo.

Ideally, I am wanting the white version of the navigation, seen on Home 3 to be on Home 5 Copy - for some reason when inserting that symbol, Navigation White onto Home 5 Copy, the navigation links are no longer white when they start out (see in preview mode). Not sure how to fix this. If you preview the Navigation White Symbol on Home 3, you will see the nav links are white.

Next, as you scroll, I’ve been trying to make the logo icon that animates be the full color version, (In assets, it’s the “ib-icon-fullcolor.png”) since the interaction as you scroll places the logo on a white navigation bar. I tried adding another image and having it animate and the original white logo icon disappear, but nothing seems to be working. So any advice here would be helpful. Seems like a simple task to accomplish, just my brain is at it’s wits end after even trying to get the text links to stay white didn’t seem to be working.

Please let me know if I need to clarify anything. When you get into the theme, you will have to navigate to pages Home 3 and Home 5 Copy to see what I am talking about, and also enter preview mode to see the interaction in action.

Site share link is here: https://preview.webflow.com/preview/instabuild-2018?preview=96b5b86cc8214afca3812496da584d12


#3

Moved this to the Design Help forum, originally in Interactions. Just looking for some help here. Thanks!


#4

Happy to take a look in the morning!!


#5

Thanks! Looking forward to some help!


#6

First solution for your nav links:
CloudApp


#7

When doing this, though, it changes them to white in the animation. And I don’t want that. I want them to go from white to black, as they do in preview mode on “Home 3”


#8

For your logo and nav items changing color while scrolling go to the interactions panel and apply a “Text color” change for each one of them:

CloudApp


#9

I think I found the issue…
You just need to change the scrolling interaction from “Navigation scroll Animation” to “Navigation White scroll Animation”

CloudApp


#10

@philippe already has you covered! I was just making a video! :clap:


#11

This is great, and a simple solution like I hoped!

Still not sure on getting that logo to swap out. Appreciate all the help so far.


#12

Add your colored logo in the navbar (next to the other one). Inside your interaction, use Show/Hide between the two logos while scrolling. I think it will do the trick.


#13

I’ll give this a try. Thank you so much.


#14

There was no “show/hide” in the scrolling, but I used the “Size” option instead. It worked. Thank you so much for your help!