NO BUG: When i set blur on header, my nav menu crash (backdrop filter)

Bugs
1

Hello,
i just find a bug.

When i set these css on my header section:
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);

My nav (nestable) menu crash. Its has not 100% height as usually but about 20 px and there is overflow auto - scrollable. Any tips? Of course, i tried to use @media (max-width 992) on these CSS but doesnt work. Of course, i can set height in nav menu to 100vh but it seem bad. Height 100% doenst work.

Any solution?
Thanks
Adam

2

Hi @timmse

I’ve the same problem… this problem has existed for several bricks versions…

Could you please take a look at this - thanks in advance!

3

backdrop-filter, mix-blend-mode and others create a new stacking context. I assume backdrop-filter is applied to the header and the offcanvas/nav mobile is its child.
There isn’t an all around solution: you can try with different positioning/wrapping, otherwise placing your offcanvas outside the header (for example in a template rendered with a hook) will for sure solve your issue.

4

I’m not sure whether or not this is related, but I’ve been trying (without success) to make my nav and my mega menu both have a backdrop-filter: blur. The effect only seems to apply to either one or the other, but not both simultaneously. Has anyone else encountered this issue or found a solution?

5

Hi Adam,
Welcome to the forum!

First things first: when posting a potential bug, you should choose the correct category, “Bugs.” You’ll usually get a reply much faster there :rocket:

However, as Deadlift has already said, this is not a bug. Have a look at this report: NO BUG: Nestable mobile menu broken - #4 by timmse

Best,
timmse