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:
Use the Search Feature. Maybe there is already a solution to your issue.
1. Update Lay Theme and all Lay Theme Addons
2. Disable all Plugins
3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
4. When using a WordPress Cache plugin, disable it or clear your cache.
Now see if your problem solved itself.
Go here, see if your problem is listed here:
Troubleshooting
When you post:
1. Post a link to where the problem is
2. If the problem is difficult to explain, post screenshots / link to a video to explain it
I don't answer or check forum DMs, please just post on the forum.