There is so many possible settings in elementor, maybe we can find the cause if we have some more info:
- Does this happen on desktop? Or also on tablet or mobile? - Did you make your header a 'sticky' or not? In other words, should it scroll with the page or always stay visible on top? - Do you use any scrolling effects? - Did you use any other methods to 'nail' the header to the top?
A website URL, if active, might come in handy too.
- I see a sticky header on my mobile phone. Which stays on top and doesn't move (sticky) when you scroll the page.
- On Windows 10 desktop, Edge browser, I see it coming in with an animation, but disappearing as soon as you start scrolling.
- On Windows 10 desktop, Firefox, I see no header at all.
First: There is no need to do anything to 'nail' or 'stick' your header to the top. If you created a header and chosen 'top' when you created it, it will be there.
What I think: I assume you mean you don't want the header to stay on the page when scrolling? That is called a 'sticky' just like the header on this page. If I understand correct, you don't want that? Then don't set it to 'sticky'. When you edit the header in Elementor, go to the 'advanced' tab, and under 'movement effects'(might be called different, but that's what it's called in Dutch). There is the 'sticky' option. Don't set it to 'top' but to 'none'.
Furthermore, I guess it disappears because the z-index isn't set right. The z-index determines which layer is on top. The higher the number, the higher the layer. I think you must set the z-index for the header 1 or higher. Doesn't really matter, you can also set it to 9 or 99 or so, as long as it is higher than the other elements. This setting is found under advanced tab> advanced.
I see, the header completely vanishes the moment you start scrolling. That's weird!
The debugger in Firefox mentions this:
This website appears to use a "scroll-linked" positioning effect. This may not work well with asynchronous panning (translated from Dutch)
That could be the problem, but then it is still unclear how to solve it. We are now into some guessing-work I'm afraid.
Here is some trial and error suggestions:
- On the Wordpress dashboard, go to: Elementor > Extra > General (first tab) > recompile CSS and apply. (Again, translated from Dutch, so might be a little different) - Turn off the incoming animation effect of the header, and see if that helps. - Recreate the header by making a new one from scratch, and see if the behaviour disappears. - Since it sounds like a bug in Elementor, you might report it to the elementor team.
Well, I am at a wild guessing stage right now, but maybe some of these things might actually work...