Sup Bricks Fam,
I am running into an issue where the backdrop blur filter
( root {backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);} )
that I have set to be behind the OffCanvas Navigation, seems to not apply to the background when unfolding the Mobile Navigation (it only applies to the header).
When opening the page on my iPhone, in any browser, it seems to work.
Maybe someone has an Idea on how this could be fixed, thanks in advance!
The page: Homepage – Tobias Erlach
Hey Tobias,
on what element did you put that CSS selector? And what exactly do you want to blur?
Best,
André
The goal is to blur the whole site when the navigation is open. Therefore i have created an extra class that contains the CSS from above. The class applied to the following element:
Hey Tobias,
I think the issue is that you also applied this class to the section within your header. That breaks the behavior. Remove the class from there and you should see it working as expected.
Probably related to this “nested backdrop filter issue”: html - backdrop-filter not working for nested elements in Chrome - Stack Overflow.
Best,
André
Problem resolved. Thanks André!
Hi! I think remove styles from the header (section) is not a solution.
Even if you put the backdrop-filter css to the header the problem still persist.
I think is a bricks related problem, because if you add display none to .brxe-nav-menu .bricks-mobile-menu-wrapper.right the error/problem disappear.
