Hi everyone hope you’re well. Any help on the below would be much appreciated please?
My navbar has a transparent background, but when the menu button is clicked I’d like a backdrop blur filter to appear (so it matches the dropdown menu which has a backdrop blur filter). I can’t figure out how to have the transparent background animate to a have a backdrop filter blur?
I have attached an image to show what I mean.
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Hello, I have the same issue but in a slightly different context.
I have my nav bar with a backdrop blur filter applied, and when I try to apply the filter to the drop-down menu it simply doesn’t work. Instead, when I switch off the filter on the nav bar, it is applied to the drop-down, and vice versa. Have you been able to solve this issue?
I would make the Nav position relative, add a div with the background blur applied to it into the Nav, position the div absolutely to fill the nav, and then add an interaction to your dropdown open/close interaction that makes the opacity of the blur div 0% when the menu is closed and 100% when the menu is opened.
If you share your read-only link it would be easier to see what the problem is.
This is what I have now
Writing this here because I had the same issue, but didn’t find any solutions. Tried adding an absolute Blur Background Div in the Open Dropdown but it just doesn’t work. No Blur is applied or visible. Even tried it in your shared Project, same thing…
Same issue after more than 1 year
