Amazing NavBar Interaction

Hey Guys! I wanted to if this implementable on Webflow or not
so here’s the screenshot!



I’m not sure how but the icon and the menu button seems to be changing its color with respect to the backdrop behind.


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

Most likely it’s 2 images places into the same div, one image is black and the other is white, both are positioned absolute, and with an interaction, they hide/show the upper one.

Depending on how simple the logo icon and hamburger menu are, I’d recommend using SVGs. You can set the fill="currentColor" and change the colors dynamically by modifying the font color of the element. Just create an interaction that changes the text color when a specific element is scrolled into (or out of) view and you can make all the nav elements any color you want.

1 Like

you also can create an icon font and change text color

Thanks Guys! This was helpful.

I’ve actually got a good but temp fix. I created the menu icon with divs and kept them white, then I created “While page is scrolling” interaction on filter - invert. (could work with change color) and then use the live preview to note each section’s percentage.

Quick question, how are you finding and noting the percentage of the sections? I’ve always found the offset field a bit confusing as it always seems require the opposite of my expectation.

Once you turn the live preview on, it’ll show you which position you’re at when you scroll