PLEASE HELP: Drop-down arrow animation fires on pageload instead of click

Hey all,

Tearing my hair out at this one, it’s always the little things.

So I’ve tried to set-up a basic interaction where an arrow will flip depending on whether a drop-down is open or closed.

The drop-down in question is ‘product’ drop-down in the navbar.

Designer link: Webflow - Ambio Media

Simple right?

Well apparently not, the ‘open’ interaction is currently firing on page load instead of click.

After clicking the drop-down on and off a few times it starts to work but don’t know what’s going on at the first stage.

Played about with initial state and rebuilt it multiple times and can’t figure it out.

Any help would be massively appreciated.


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

Hey all,

Got some feedback from Webflow on this issue and it turns out this is something that they’re aware of. It’s because I have a tab nested inside a dropdown. Apparently this only usually happens on preview mode and not on the live site. I’ve asked if they have a workaround.


1 Like

Hi @Aidan_Brotherhood

I would put the Interaction on the Nav Dropdown Toggle, not the Nav Dropdown. This seems to work nicely for me.

Only problem with this solution is that you can’t use the ‘Dropdown opens’ element trigger on the Nav Dropdown Toggle - only the Nav Dropdown itself.

Thanks for the feedback @WisdomainUK @samuelpowellweb,

I initially had this set-up as a custom interaction that was triggered by someone clicking the toggle and affected the state of the icon. While it did work, I was finding that when you have it applied to multiple dropdowns in the navbar they don’t automatically close when clicked away, so you end up with multiple dropdowns open and it becomes a bit of a mess.