Dropdown Navigation broken on Safari

Hey everyone!

I’m struggling with a strange issue only present on Safari. The site I’m working on for a client has 2 dropdown navigation menu’s these work perfectly on chrome but only work when the website is at the top of the page on Safari.

Here’s a video going over the issue: https://www.loom.com/share/0ef25016c9d649f38833e9c0bdbf5ba5

My initial thinking is that this is potentially something to do with the display settings but I’ve had no luck in fixing it so far.

Thank you for the help :slight_smile:


Here is my site Read-Only: https://preview.webflow.com/preview/sibros-staging?utm_medium=preview_link&utm_source=designer&utm_content=sibros-staging&preview=ac5eea22ec98d9288c0844b9b4f45496&mode=preview

can you provide the link to the published website so I could have a look at it?

Certainly, thanks for taking a look!

So, after looking at it, it seems that this is a limitation of using the built in dropdown element… there are others who have faced similar challenges

The problem is with fixed positioning once you open the dropdown… because of it when you scroll the open dropdown scrolls with the page… and if you change the positioning to absolute (which is what it needs to stay in place) then the dropdown built in design will position it immediately below the toggle… so it opens to offscreen… I don’t think you can fix the built in dropdown behavior so try and make your own - it should be pretty straight forward…

I think your best bet would be to create your own navigation with your own interactions…

Hey @IVG sorry for the late reply. Managed to fix this by resetting the display to fixed and adapting that to the fixed nav height [I.e setting the menu to fixed with the nav height as top margin]

Thanks for the help :slight_smile: