Custom Drop Down Not Working

Design help Animations & Interactions
1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

2

I’d recommend using the Webflow native dropdown instead, and add style and open/close interactions on top of that.

The primary reason is that it already has the correct behavior needed for basic dropdown function, and it already supports responsive menus for your mobile view.

3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

1 Like
4

Yeah, avoid that break. Instead of trying to push the Drowdown List element down, you can expand the height of the Dropdown Toggle element. If it’s the same height as the containing nav bar, you should be able to get your list to appear just below ( but touching ) your navbar with no gap and no overlap.

You’ve done a lot of styling inside of your interactions which makes it difficult to check this. I’d recommend pulling all of that styling into your navbar directly and the minimize the interaction to just the styling that needs to change during interaction.

5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.