Backdrop filter on dropdown

[xoa]

Hello,

I was able to include the backdrop filter for my navigation bar. Now I’d like to add the blurry effect with the backdrop filter also to the dropdown menu. But with the following code, only a part of the drop-down menu is affected by the effect.

$el .x-dropdown {
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(100%) blur(20px);
}

I also added a screenshot for better explanation. See the red lines. They show where the backdrop filter stops working.

[ruenel]

Hey @xoa,

Thanks for writing in! When I check your site, I am seeing this:

It seems that your custom CSS code is working. Be advised that custom coding is beyond the scope of our support. You are the one to maintain the code or the one who has created he code.

Meanwhile, if the code does not work for you, kindly check your class selector. You may need to include the submenu items since it has a background colors also.

Best Regards.

[xoa]

Hey, thanks for your reply.

Yes, that is my problem. I can’t find the right class for the dropdown/submenu to make it work. With .x-dropdown it covers just part of the dropdown, as you can see on my screenshot. (left side of the red line the bg is not blurred, on the right side it is.

[ruenel]

Hey @xoa,

Kindly remove any background-color for the menu items. Set it to transparent instead.
Click the navigation inline element and find the “Menu > Sublinks”:

Hope this helps.

[xoa]

Hey there,

I think it’s not a background-color problem. No matter what I change, I always have a bit of space in my dropdown, where the backdrop blur effect does not work.
On my latest screenshot I attached you can see the arrow with O.K. This is the area where the backdrop blur effect DOES work.
On the area with the other two arrows it DOES NOT work. And I don’t know why.
So therefor I’m asking myself if I just selected the wrong class for my CSS code?

[ruenel]

Hello @xoa,

On my screen, I am seeing this:

I am not seeing any solid background. Did you remove the code?

Thanks.

[xoa]

Hi there,

There should not not be any background image at all. All i want is the drop down menu, background color #6c6060, transparency 0.85. That is what I have set for the drop down.

But now I still want to add that backdrop blur effect to the drop down I have already applied for the menu navigation on top.

But I cant find the right class or „element“ where I have to set the backdrop css.

With .x-dropdown I have that strange problem, that backdrop blur is not applied to the whole dropdown. (see my latest screenshot).

Hope this helps!

[christian]

Hey @xoa,

You blur setup works perfectly on my end in Edge. I don’t see the blur working in Chrome and Firefox and we cannot investigate that as it is not a theme issue.

Regarding the positioning of the blur, you will need to consult with a 3rd party developer as to why that’s happening on your end only. The x-dropdown is the correct class to target. The answer that you need is what correct blur setup that will work for your computer so for that, you’ll need to consult with a local IT professional or a developer to work closely with you and investigate why it’s happening on your end.

Since what you’re trying to achieve looks cool, I’ll post this internally as a feature request so it will be queued for testing by our development team. Please just note that the backdrop-filter CSS property doesn’t have full browser support yet.

Thank you for understanding.

[alexander]

Hi there,

I wanted to followup on this feature request. Regretfully it’s not something we would do near term because it depends on some browsers to enable an experimental mode. This doesn’t make for a good user experience because people would be adjusting the control and seeing nothing happen.

@xoa Nice job getting there with element CSS - that’s definitely he way to go in terms of adding the functionality per element. From what I can tell you have the right selector but for some reason it isn’t applying the filter outside the padding. Maybe that’s a quirk of the browser you’re checking in. A way around this might be setting padding to zero on the dropdown itself and reapplying spacing on the li elements within with additional CSS. This gets outside the scope of support for us to further investigate but it might give you some ideas.