Backdrop Blur — Mobile Nav for Safari
-
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 -
@Richard-K @Armin-Unruh Can you take a look at this topic, because I am facing the same issue right now. Thanks in advance!
-
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 -
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it