Problem with my header while scrolling

[Peter789]

Hi @ruenel ,

I have pasted the following CSS code from this forum post to make my header blurry like on Apple’s website:

How do I edit the header bar to be blurry?

You’re welcome Katarina! We’re glad were able to help you out.

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

Unfortunately, while scrolling on my website via phone the header is glitchy (disappears sometimes for no reason and doesn’t work properly)

I tried clearing cache and tested it on other browsers… but the issue is still there

Please watch this video down below to see what I talk about:

[ruenel]

Hello Katarina,

Thank you for the detailed post information.

Please make sure that the “Shrink Amount” of your bar settings is set to 1.

If nothing is helping, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
​
To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[Peter789]

Hi @ruenel

I have checked my header settings and everything seems to be ok! The “Shrink Amount” is already set to 1

Please take a look at my staging website to see what’s going on
(Sorry if it’s all messy I was testing some design stuff haha)

[marc_a]

Hi Katarina,

Thanks for providing all your details!

I just check your header builder and the settings look fine. Then, when I check your website on my actual mobile device, I can’t replicate the issue. I suggest that you clear your browser cache, if the issue still persists, would you mind sharing a video that shows your issue.

Hope that helps.

Thank you.

[Peter789]

Hi Marc,

Thanks for your reply

As I told in the first message, I tried clearing cache on all browsers (Safari, Chrome, Mozilla & Brave) and tested on all browsers but the problem is still there

I also tried it with my other phones…but it’s the same situation

Here’s again a video showing you the problem:

[Peter789]

Did you guys do any changes to the staging website? Since it is all messed up and it is not fullscreen on home page…

[tristup]

Hi Katarina,

Although the staging site is for experiment and troubleshooting purposes, still we avoid changing anything into it. If you think it has been changed somehow, I would request you to copy your site once into the staging and let us know if that issue still exists.

I have also seen that you are still using a much older version of the theme i.e 4.0.11, whereas the latest version 4.2.0 has been already released for automatic update. I would suggest you update the theme in staging first and if everything goes fine, migrate that into the live one.

Thanks

[Peter789]

Alright @tristup, I know that the staging website is for testing & experiments

But what about the problem I am having?

Did you find out what was the problem with the header?

I really want to solve this problem since I really like the apple blur effect on header, and I see that the reference website I told you about has that effect with the same “CSS” code, but he doesn’t have the problem like me (He also built his website with themeco PRO builder)…

So please guys, If you don’t help me with this… I don’t know who else could

@ruenel @marc_a

[ruenel]

Hey Katarina,

This is what I am seeing on my phone:

• https://www.youtube.com/watch

Regards.

[Peter789]

Hey Ruenel,

Please remove your YouTube link since it is public.

This is what I am seeing on my phone:

[Peter789]

GUYS! I FOUND OUT WHAT WAS THE ISSUE!!!

By disabling the option in Miscellaneous (for the scroll thing) the problem is fixed… I can’t believe that this little thing was the problem haha I’m so happy

Thank god I fixed it

[marc_a]

Hi Katarina,

We’re glad that you’re able to find a solution to your issue and I already remove the YouTube link on Ruenel posts. If you have any other concerns regarding our theme features, feel free to reach us.

Thank you.