By using Elementorforum.com’s services you agree to our Cookies Use and Data Transfer outside the EU.
We and our partners operate globally and use cookies, including for analytics, personalisation, ads and Newsletters.

  • Join the Best Wordpress and Elementor Support forum

    Provide or get advice on everything Elementor and Wordpress, ask questions, gain confirmation or just become apart of a friendly, like minded community who love Wordpress and Elementor


    Join us!

Unable to fix the header in the same position

chintanlalwani

chintanlalwani

New Member
I have been trying to nail my header to the top of my website, but it keeps on following right to the footer, scrolling along like a Sunday morning....
 
Tonio

Tonio

Member
Hi,

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.
 
chintanlalwani

chintanlalwani

New Member
Hello Tonio,

Thanks for your response!

I am encountering the situation on every device. I want to stick it to the top, but it is scrolling down and no I am not using any scrolling effect.

Can you suggest the method to nail it to the top?



The website I am referring to is chintanlalwani.com
 
Tonio

Tonio

Member
Hey that's strange:

- 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.

Hope this helps. Nice site, by the way.
 
chintanlalwani

chintanlalwani

New Member
Hey Tonio,


Thanks a lot for taking the time to reply and craft such a detailed message! I hope you are doing well :D

I actually do not want a sticky header for my mobile or website. And, it is not that I understand the difference :p I want a fixed header nailed to the top overseeing my army.

I have used a scrolling effect to make it disappear, but it is a back-up plan and unintended. If it reappears again, I shall be more than pleased.

I did choose the 'top' option under motion effect -> sticky. Upon choosing, none, unfortunately, the whole header drapes an invisibility cloak and disappears.

Dank je! I am trying my best \m/
 
Tonio

Tonio

Member
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...
 

Latest Resources

Other Elementor Resources

elementor official
Top