I am having endless issues trying to get custom drop down boxes to work. Half they time they work fine then suddenly they stop working. Basically if I hover over Clients it rolls out a drop down menu, then when I hover over the page or any other link it rolls back to hiding. It sometimes works and sometimes doesn’t and I can’t figure out what is wrong.
Here is my public share link: [LINK(Webflow - Morgan & Bales)]
(how to access public share link)
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.
I got this to work, thank you.
I have a single issue now. The drop down box overlaps with the nav bar color, as both have less than 100% opacity they have a slight overlapping darkening effect. Is there anyway to fix this? If I increase the margin it just causes the hover the ‘break’ and the dropdown box to disappear.
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.
Managed to fix it, the final issue I’m having is the roll out effect size 0 to size 100% works for the dropdown background but not any of the elements contained in it. I have overflow set to hidden.
