Site moves to the right when scrolling to top

@007me Hi, I’m sorry you are having issues. I’ll be happy to help you get this sorted out first thing tomorrow. I was gone all day today and now it’s late here.

@rwattner Hi,
Thanks, waiting.

@007me After looking at your site I found the issue that is pushing the site to the right. It’s not my plugin, it’s this bit of code:

#site-navigation-wrap {
    float: left;
    left: -15px;
    right: auto;
}

The “left: -15px;” is the problem. It is on this portion of the header
https://drive.google.com/file/d/10WX3AXhRRYpxTvQq_pQG8pUVuXsPeCs2/view?usp=drivesdk
I’m not sure exactly what is adding that code but if you want to disable it then you can simply use this code:

/* NAV WRAP LEFT SPACING */
#site-navigation-wrap {
    left: 0 !important;
}

As for the page jumping… I see you have transparent enabled but your header is solid white. In this case, you should turn off the “transparent header” option. This is what’s happening with it enabled as stated
https://drive.google.com/file/d/1N3RRZXPmwHYRWe3nAIcwRhyp8FYPhahA/view?usp=drivesdk
The “blur background” you have enabled won’t work with a solid background color. Set the “Background Color” option to change to a semi-transparent color by lowering the opacity a little bit if you want to see the blur.
https://drive.google.com/file/d/16c7Ij4W_EqenPNUoV4U8XafAQIP0lw60/view?usp=drivesdk
https://drive.google.com/file/d/1Ddd5ZIhq7ipQTffUUkhq3uvBjq8Mwpc3/view?usp=drivesdk
Next, since you just need a simple sticky header, just use Elementor’s “Motion Effects” “Sticky” option set to “Top”. It’s under the advanced tab of the header section.
https://drive.google.com/file/d/1QBvSSgHuKmpWxdYUPuO2E1kdPmHN-j-O/view?usp=drivesdk
https://drive.google.com/file/d/1Hvhh9Kw7Cn7LKrfqP6SONVygvdUr5oYW/view?usp=drivesdk
Finally I would increase the “Scroll Distance” setting to be greater than the height of the top most blue section which seems to be 45px desktop and 75px mobile. You might want to set it even more if you plan on using a semi-transparent background.
Let me know if these changes help you. I’d be happy to help you further if you need.

• This reply was modified 2 years, 9 months ago by Robert Wattner.
• This reply was modified 2 years, 9 months ago by Yui.

@rwattner Hi,

first, big thank you for the detailed and thorough answer. Really appreciated.
I’ll go over all what you wrote here today or tomorrow and will get back to you.
Thanks a lot!
As for the Elementor, I’m using the free version so no sticky option for me.

Udi

• This reply was modified 2 years, 9 months ago by 007me.

@rwattner Hi again,

I’ve setup the header from scratch and it solved the space issue on the left side.
You can see it on the PROD site here:
https://www.dam.org.il
As for the settings that you’ve mentioned that I enabled, well, as you can see on the screenshot here I never enabled these settings. so I still wonder why the page is jumping.
https://www.dropbox.com/s/cqetkrdee0ibkg1/2022-01-31_19-22-53.jpg?dl=0

Thanks again,

Udi

@007me That’s great the left spacing is solved! Sorry, I didn’t realize you weren’t using Elementor Pro. The plugin is really just meant to add functionality to the Pro sticky feature but I think we should be able to get your header working how you like. If you have a way to add custom css could you please try this code and let me know if it works for you.

.she-header-yes, .she-header {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
}

If that doesn’t help then I might have you email me [email protected] so I can help you further. Due to wp forum rules, I’m a bit limited here, unfortunately.
I hope that does the trick, let me know.

@007me Almost forgot, can you please try increasing the “Scroll Distance” setting to 100px for testing?
It just needs to be more than the height of the top blue section. If the header is not yet at the top of the page when the scroll distance is reached, then the header will “jump” from wherever it is to the top. With the current scroll distance the header isn’t quite at the top and is jumping a few px

@rwattner,

Ok, the CSS didn’t help nor the “scroll distance”.
I’ll write you an email.
Thanks.