Backdrop Blur — Mobile Nav for Safari

[brinifein]

Hi there,

I tried a customized Mobile Menu, where the blurry backdrop effect of the menu navbar is also applied to the whole overlay menu.
Here is a screenshot how it should look — in Google Chrome it works fine, but it seems that safari is not supporting it.

Heres a Screenshot how it looks in Safari:

Now I wonder how you managed to make this effect work applied to the navbar in Safari? Is there a special way to do it that I did not came up with?

You can find my website via www.brinifetz.at

I'm using following code in the Custom CSS:

/* Blurred Mobile Menu */

/* if supported */
@supports (backdrop-filter: none) {
    nav.mobile-nav {
    -webkit-backdrop-filter: saturate(180%) blur(20px);!important
    -moz-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    background-color: rgb(255,255,255,0.1);
    }
 }
/* Fallback */
@supports not (backdrop-filter: none) {
    nav.mobile-nav {
    background-color: #e5e5e5;
    opacity: 1;
    }
 }

nav.mobile-nav li a {
    background: none;}

nav.mobile-nav li.current-menu-item>a  {
    background: none;}

/* END Blurred Mobile Menu */

Maybe you have an idea, what the problem is here. :)

Thank you!
Brini

[felix_rabe]

@Richard-K @Armin-Unruh Can you take a look at this topic, because I am facing the same issue right now. Thanks in advance!

[Richard]

Dear @fr

The issue being that you cannot get the blurry backdrop or above code appiled, to work on Safari/mobile?

Are you able to post a link to the website also & any other relevant information :)

Best wishes
Richard