How to Create a Blurry Header & Glowing Hover Effect in Elementor - Easy Wordpress Tutorial

[@mohammedbello3866]

You are such an amazing person. May the Lord continue to bless you.

[@ANIVERSE248]

thanks for the resources you have super charged our productivity

[@DMLeBeau]

I love it. I tried it with my menu which has a dropdown. Only the first line on the dropdown appears. Maybe I need to tweak things around

[@the_mig]

The dropdown is being hidden inside the header because of the second container , the one that you put as overflow hidden .. Some menu widgets are coded so that the drop down is an extra div and not as a popup, so would have to play with different widgets .. The reason it’s set to hidden is to stop the glow going beyond the middle header container ..

[@Shootfix_AS]

On the mobile version, the header isn’t blurry. It appears blurry in the browser version, but not on the phone. Any idea how to fix this? 🫣

[@the_mig]

err.. ... oh wait.. my bad.. I didnt put all support for the blur.. this new code should fix it. in the header container there is the custom css, Replace it with this: /* css goes in .rebootheader */ selector { --blob-size:200px; } selector .rebootcontent{ -webkit-backdrop-filter: blur(10px); /* Safari support */ backdrop-filter: blur(10px); height: 100%; } selector .rebootglow{ width: var(--blob-size); height: 80%; left: calc(50% - calc(var(--blob-size)/2)); filter: blur(40px); z-index: -1; opacity: 0; transition: opacity 300ms 300ms linear; } selector .rebootfakeglow { visibility: hidden; z-index: -1; height: 100%; }

[@Shootfix_AS]

@ working! Thank you so much!!!☺️