Mobile hamburger drop-down menu not opening on Samsung devices

Hi there,

So I have found a new bug with my site (it never ends hahah). My hamburger drop-down menu on my mobile header works perfectly fine on all Apple devices and when clicked, will expand to show my different page links. I provided a screenshot from my iPhone to show you what it should look like on all mobile devices. 

However, when my site is viewed on a Samsung device, the hamburger drop-down menu does not fully expand to show the page links. I will provide a photo of my site on a Samsung Galaxy phone to show you what it looks like when the hamburger drop-down is clicked on there. 

I am a novice programmer and I have coded my whole site by myself but this one is stumping me. I think it is a spacing issue or possibly related to the viewport. Help!

Site: robinclip.com

Password: squarespace

Thank you

So I spent some time digging and I found the issue. The issue was with this design CSS snippet:

header { backdrop-filter: blur(5px) !important; }

This doesn't affect the desktop site but for some reason, it prevents the mobile nav menu from opening on Android devices.

I fixed it by setting a media query of:

@media screen and (min-width: 1025px) { header { backdrop-filter: blur(5px) !important; } }

Cheers

Hey Peter S – I've just stumbled onto (i think) a similar issue.

I've a client who can't see menu items (in header) on his Samsung laptop.

Do you think your fix would apply in this situation? Or was your fix just for mobile?

Just now, harleyst said:

Hey Peter S – I've just stumbled onto (i think) a similar issue.

I've a client who can't see menu items (in header) on his Samsung laptop.

Do you think your fix would apply in this situation? Or was your fix just for mobile?

btw site looks fine on all apple devices - not sure about other androids, but it's also ok on apple bootcamp