Streaming live at 10am (PST)

Menu not appearing on Safari only


#1

Hi There,

Whilst displaying correctly in other browsers, the floating menu just dissappears in Safari.

I don’t have a mac to test on but this seems very unusual to me.

Any ideas?


Here is my site Read-Only: https://preview.webflow.com/preview/heard-agency-website-f16547f6b0e2130b1f?utm_source=heard-agency-website-f16547f6b0e2130b1f&preview=e28130da193b55bc7c77ed727743c59f


#2

Hi @Willem_Reyners_Tay

It looks like you currently have the navbar set to overflow: hidden, and because the menu button is positioned outside of the navbar itself you aren’t able to see the menu:

CloudApp

Once that setting is removed you’ll see the menu as expected. Hope this help! :slight_smile:


#3

I can see the button now, but the menu doesnt slide in as expected on Safari 11

I also removed some interactions to see if that effected it but still the same problem. Simply not sliding out.


#4

@Brando any ideas here?


#5

Hi @Willem_Reyners_Tay

Thanks for pinging me on this. That’s definitely odd. I imported your site for testing and upon working with the copy the menu opened as expected even though I made no changes.

Can you please try unpublishing then republishing the project, and then test again in Safari?

If this doesn’t work, can you please try unlinking the navbar symbol, then publish and test?

​Thanks in advance.


#6

@brando success.

I have no idea why… but it worked!!


#7

Thanks for confirming that @Willem_Reyners_Tay

I’m not entirely sure why this worked either haha. I’ll report this to our engineers as an issue with Symbols in Safari and we’ll investigate further.

The odd thing here is I was testing again today, and after relinking the symbol to try and reproduce the issue, it still worked as expected. If you recreate a symbol out of the nav, does the menu work in Safari?


#8

@brando hey thanks for helping before but I am still having lots of issues with our menu on mobile safari.

for some reason its not taking up the full width of the screen, and the nav links are taking up the full width of the container.

It, however, works perfectly on mobile chrome and firefox on android, and in an inspector.

We also have some transparency on our menu button which doesn’t look to be respected when the menu pops in on any platform

Im tearing my hair out here with all these mobile safari problems.

Ive never had something render so differntly on these platforms. Any idea what could be happening here?

I’ve stripped down the menu to the bare bones (basically rebuilt it from scratch) and still its occuring so any help here would be greatly appreaciated.