Blurry header doesn’t work

  • Resolved wpdevar

    (@wpdevar)


    4 years, 9 months ago

    Hello,

    recently, when I updated my page design with Elementor my blurry header stopped working properly. For some reason, it works only on the first section, and when I scroll down the blur stops working (header becomes just transparent). How can I fix this?

    CSS for blurry header:

    .sticky-header {
	position: fixed;
	width: 100%;
	
	background-color: rgba(0,0,0,0.2)!important; 
   backdrop-filter: saturate(180%) blur(10px);
   -webkit-backdrop-filter: saturate(180%) blur(10px);
}

    Also, the frosted glass effect doesn’t work anymore…
    it is in the 3rd section (“We offer: …” )

    CSS for frosted glass effect(glassmorphism):

    .frosted-glass {
	background: rgba( 255, 255, 255, 0.1 );
	box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba( 255, 255, 255, 0.18 );
}

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • victoros

    (@victoros)

    4 years, 9 months ago

    Hey, it’s possible that some of your CSS became broken/ Elementor’s update made the effects incompatible.

    The following list of steps goes from easier possible culprits to more advanced ones:

    Regenerate the CSS via Elementor > Tools > Regenerate CSS on your WordPress Dashboard.

    From Elementor > Settings in the Advanced tab in the WordPress dashboard, switch the CSS print method to Internal embedding.

    If those steps didn’t help, go to Elementor > tools and enable the safe mode setting there.

    “Safe Mode” is a safe environment that isolates Elementor and WordPress from all themes and plugins. If it helps, Deactivate your plugins one by one until you find the culprit.

    If it deactivating plugins doesn’t help, switch your theme (temporarily) to a default WordPress theme such as Twenty Twenty One and see if it makes any difference.

    Switch the CSS print method back after following these steps, regardless if it helped or not.

    As a last resort option, you can Rollback your plugin to Elementor (core) 3.3.1, follow the steps in this guide​. Make sure to take a backup before doing this step.

    Thread Starter wpdevar

    (@wpdevar)

    4 years, 9 months ago

    Hi @victoros,

    I tried all the methods, but even rollbacking didn’t help (I am right now on Elementor 3.3.1)

    victoros

    (@victoros)

    4 years, 9 months ago

    Since this query is regarding your CSS, may opt to visit our Github account where you may get in contact with a member of our development team to query this with.
    https://github.com/elementor/elementor/issues

    Please note that this is not an official support channel but a respective member of the development team will respond to your post as soon as they are available.

    Please follow this guide which outlines the steps required to post on our Github: https://github.com/elementor/elementor/blob/master/.github/CONTRIBUTING.md”

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Blurry header doesn’t work’ is closed to new replies.

Tags