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

[@ANIVERSE248]

thanks for the resources you have super charged our productivity

[@mohammedbello3866]

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

[@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!!!☺️