Streaming live at 10am (PST)

How to add interaction to Nav Bar?

Hi webflow experts,

Does anyone know how to add a transition to a nav bar, similar to the effect of hovering over the nav bar on this site.

The nav bar is initially transparent, and upon hover, it becomes slightly opaque. The problem I’m having is when I set the trigger on a hover and add a “Hover Over” effect, I can’t manipulate the fill color of the bar. There just seems to be no way of doing this easily.

Does anyone have any ideas?


You can do this without interactions. First set the background of the navbar to be transparent in the style tab.

Then click on states, select hover and make it whatever color / opacity you like.

You can also scroll all the way down on the style tab and give it a transition if you are feeling extra fancy.

Wow thanks @LJB! It’s that simple geez! I just applied it and works like a charm! Thank you!

1 Like

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.