On some pages header don’t shrink and page bounce

Hi, I’m sorry you’re having problems with the plugin. Do you have a link to a page that is having this problem? This sounds like a problem that can be caused when using negative margins. Have you checked to make sure you are not using any negative margins on the header?

Thank you a lot for fast answer.
The page is in coming soon mode, but I just took it off so you can look. As mentioned I started over again trying to fix it, s? not much content yet. I did have negative margin for the mobile menu, but it was also one of the things I took off again without success.

It seems random which pages is affected, right now I have the issue on this
specific page:

https://yogaly.dk/events/yoga-onsdag-eftermiddag-2020-02-12/

I am not sure if you will also have the issue, but somehow I hope so.

Hi again.
After some more testing I know what causes the problem. And hope you have some idea how to solve it. I am not sure if it is a general error, but I will guess so, since it happens for me with different settings and themes.

So here goes:
If I make any kind of page on a specific length, something like from the point where it should shrink to 4-5 cm longer – the problem occurs.
As on this page: https://yogaly.dk/test/

Then, just adding a few more lines to the page and it is long enough to exceed a length where the problem exists:
https://yogaly.dk/test2

Well, I know how to solve it now, just have to make sure my pages have enough content or adding some more info in my footer. But I hope you will try to re-generate the problem, and if it is a general thing – that it is possible to fix it.

I will leave the page open til you have send a reply, so you can see how the pages I link to react.

By the way, the problem depends of screen size. I guess you will not experience it on my test pages above if you have a larger or smaller screen than me. So you have to drag the lower edge of the browser up or down till it reach the footer, more or less. So you will have the right amount of space before scroll takes affect. Hope you understand my poor english..

I see what’s happening here. When the header shrinks the page becomes too short and jumps back to the top. This is just the nature of page height shrinking.
To fix this I recommend turning the “transparent header” option ON. This will mean that the header doesn’t use any page height so when it shrinks it won’t affect the overall page height. This will let the page content go up under the header though, so you might need to add padding to the top of the first sections on the page.
Another solution would be to use elementor’s theme builder and make a header that doesn’t shrink that can be used for specific pages.
Another solution would be to set the top section min-height to 100vh.

Basically the page is trying to shrink smaller than the window and causing the jumping issue. It’s not an issue with the plugin, just the way the header and page are set up

Oh my, now I used so long time on that issue and the reason seems so simple the way you explain it. Many times I thought I solved it, and it just came back the next time I created a page with the problematic amount of content. Feel a bit stupid not being able to figure out, that it was just “bouncing” back since the shrink shortened the page length. And unlucky that my event manager created pages exactly that size….

Thank you a lot for explaining the problem here, and sorry for I kind of suspected your great plugin for causing it. Fantastic support here!

Later there will be some widgets with info above the footer, I think that extra content will solve the problem…

Thanx again for a great plugin and for your help here!

.

Hi Robert.
I just add this comment if you or other users might use it. Actually I discovered this by accident. I still have not the “transperent header” activated, but what I did for other reason was to set only 5px top padding on my pages in Elementor. This had 2 great effects on how the pages reacts with Sticky Header Effects for Elementor activated.

First it solved the problem described here on all pages, no matter the lenght of them.

Second it also made the page scrolling smooth and elegant when the header shrinks. Before it kind of “jumped” 2-3 cm up, with the padding it moves pager moves up to the shrinked header nice and slowly.

I am not sure if this is common knowledge, that a user should use top padding on a page Sticky Header Effects for Elementor activated, but it for sure looks and feels much better on my page.