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.
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.