Navbar dropdown issue

Design help Animations & Interactions
1

Here is my public share link: LINK
Page preview: https://pg-2025.webflow.io/draft/navbar-build-demo

Hey there!

It’s been nothing short of a nightmare trying to build this navbar, which is split into two: Desktop and Mobile.

My issue is with the Mobile navbar only. It occurs only when you close a sub-dropdown within the main dropdowns.

Through interactions, I’ve made it so that when you click on a main dropdown, the arrow on the right will disappear, the dropdown will become green and the two big buttons at the bottom will hide.

The problem is that when you try to close one of the sub-dropdowns, the two big buttons will reappear and the main dropdown will display the arrow, which it isn’t supposed to do.

Any clues on how to fix this?

Thanks a lot!

1 Like
2

Your sub, drop down close interaction is still targeting the main drop down’s arrow + bottom buttons. Move those actions back into the main drop down interaction only. Also switch the interaction’s “Affect” to Selected element so sub, items don’t override the parent state.

3

Thanks for your input! The thing is that I only created interactions for the main dropdowns, not for the sub dropdowns. I also tried to only trigger the ‘Select element’ but it didn’t seem to make a difference. Am I doing something wrong?

1 Like