Blur filter + opacity behind drop down menu not working

Hi Victor,

..but still, result is wrong because of background opacity applied to the entire ul.

Can you share any mockup image of your expected results?

Note: The support for this CSS property is limited. While that can work on Chrome, I believe that won't run well on Firefox.

Hi,
Here is how it looks now:

I want both the main navigation and the sub-menu to look the same. Currently, the sub-menu is not blurred.

If I blur the sub-menu, it changes the color altogether:

So, my expected result is: submenu background to look exactly like the main menu background.

Ah I see.

You're aiming for something like this: https://share.getcloudapp.com/jkuPdWpq (I've removed the BG color, for now)

In that case, you need a bit of CSS workaround. By default, the backdrop-filter doesn't work on an element if its ancestor element has one.

That said, we can use pseudo-element to apply things.

Remove how you've been applying the effect and try this CSS instead:

.main-navigation:before,
.main-navigation ul.sub-menu:before {
backdrop-filter: blur(5px);
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}

.main-navigation{
position: relative;
}

Hi, yes, you are right about the result I want to achieve. Thank you for this code, but it doesn't work. The blur is not present at all, I don't know why. I tried to put !important, but still nothing happens.

You must remove the previous CSS you've added first.

You have to remove this:

.main-navigation {
    backdrop-filter: blur(5px);
}

It's removed, you can check on the live site now.

You then add this:

.main-navigation:before,
.main-navigation ul.sub-menu:before {
backdrop-filter: blur(5px);
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}

.main-navigation{
position: relative;
}

Make sure it's content: ""; not content: “”; curly apostrophe won't work.

See it in action here - https://share.getcloudapp.com/yAur7e5R

Now it works! Great advice. Thank you.

Here's the key issue incase that happens again when you try to apply it on other parts.

"In that case, you need a bit of CSS workaround. By default, the backdrop-filter doesn’t work on an element if its ancestor element has one."

We used :before pseudo element because CSS pseudo elements are not read as ancestor elements. That way, it works. :D

No problem. Glad you got it to finally work. :D

Thanks for this explanation.

No problem. :D

Hi, I am checking on mobile and seems blur doesn't work. On desktop is ok.

Hi Victor,

You can try to add this CSS for mobile:

@media (max-width: 768px) {
    #menu-primary-menu:before {
        backdrop-filter: blur(5px);
        content: "";
        display: block;
        height: 100%;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }
}

now it works, Thank you!