[Resolved] Blur filter + opacity behind drop down menu not working

[Victor]

Hi,
I am trying to make my sub-menu items look the same as my navigation bar. Main navigation is here. This CSS works well:
.main-navigation {backdrop-filter: blur(5px);}

But sub-menus are still not blurred. When I try .main-navigation * , it works, but because of the opacity, the result is wrong. Also when applying the rule to the entire <ul> sub-menu, nothing happens. It only works when styling the <li> elements, but still, result is wrong because of background opacity applied to the entire ul.

Thank you.

[Elvin]

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.

[Victor]

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.

[Elvin]

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;
}

[Victor]

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.

[Elvin]

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

You have to remove this:

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

[Victor]

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

[Elvin]

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

[Victor]

Now it works! Great advice. Thank you.

[Elvin]

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. 😀

No problem. Glad you got it to finally work. 😀

[Victor]

Thanks for this explanation.

[Elvin]

No problem. 😀

[Victor]

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

[Ying]

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;
    }
}

[Victor]

now it works, Thank you!

[Author]

Posts