Problem with sticky header on mobile

Hello,
when i first scroll on mobile the sticky header usually doesn’t show up. When i scroll again sometimes it shows up, but sometimes i need a third scroll. I treid both fixed header and scroll and slide after scroll down but i get the same problem

Hello,

Sorry but I am unable to see the issue on your website.

Could you please provide a video explaining the issue to check it myself and help you out accordingly?

Best Regards.

I have attached the video to show you what happens.
I saw that when the page is fully loaded the header woks normally, but in most of the cases the user scrolls the page before the page is fully loaded.

Thanks.

Hello,

As the header works normally when the page is fully loaded.

This is because when the browser loads the page, it reads the HTML document from the top to the bottom, from the left to the right. When reading the HTML document, the browser would have read the whole DOM before reaching your CSS and JS scripts and executing them.

The Rendering engine:

The responsibility of the rendering engine as well… Rendering, that is the display of the requested contents on the browser screen. By default, the rendering engine can display HTML and XML documents and images. It can display other types of data via plug-ins or extensions; for example, displaying PDF documents using a PDF viewer plug-in. However, in this chapter we will focus on the main use case: displaying HTML and images that are formatted using CSS.

Rendering engines:

Different browsers use different rendering engines: Internet Explorer uses Trident, Firefox uses Gecko, Safari uses WebKit. Chrome and Opera (from version 15) use Blink, a fork of WebKit.

So this only happens because of the Browser Rendering. To avoid it you have to use Cache on your site.

Hope this is all clear now.

Best Regards

We are already using wp rocket for cache, what can we do more?

Hello,

The sticky header is initialized with JS script that could be run only when the page is fully loaded. Sorry, but this behavior can’t be changed. You need to optimize your website first. Here is a tutorial that should help you with this https://space.xtemos.com/wordpress-performance-optimization-the-ultimate-guide-in-2021

Kind Regards

[Author]

Posts