How to add interaction to Nav Bar?

Design help Animations & Interactions
1

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?

Thanks!

2

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

347×869 68.1 KB

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

354×847 78.2 KB

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

3

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

1 Like
4

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