Create Blur Backdrop effect when hovering over a navigation menu item

[Beat09]

Dear shopifyers

A little expertise is needed (as I don´t have that :-))

I would like to have a blur effect on the page content (not the nav menu) when hovering over a navigation menu item in the store.

I have tried with different CSS & JS codes, but unfortunately without any luck.

The store is: https://tinylux.store 

Any expert suggestions would be highly appreciated 🙂

KR, Michael

[Moeed · Accepted solution]

Hey @Beat09 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
body:has(.header__inline-menu .menu-lv-1:hover .menu-lv-1__action>.text) main {
    filter: blur(5px) !important;
}
</style>

RESULT:

If I managed to help then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Beat09]

Dearest Moeed

It was exactly SPOT-ON

Your reply within 48 seconds just made my day

Thnx a mil

[Moeed]

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.