Archived topic
Sticky header causing vertical jump on scrolling - Padding on container element
3 replies · Started by Nick on May 10, 2022
Hi,
I've got an issue where the sticky header when it comes into effect on scrolling down causes a vertical jump in scrolling. And the opposite when you return to the very top of the page there is a jump when the sticky header is hidden and replaced by the real header at the top.
You can see this on certain pages of the development site - Work and About (linked in private info)
These pages have an element of 'No Merge' on them to add 205px of padding at the top of the page. There is a separate element of Merge on other pages like the homepage where this problem does happen. No jumping. There is no padding applied in this element.
How can I fix this? I presume the 205px padding at the top of the element is causing the issue. But I wanted a generic site wide rule for pages without a big image in the header area (like the homepage) so that the start of the content area was pushed down on a consistent basis. I didn't want to manually do this in the page layout on every page in case I needed to adjust the value site wide.
Thanks,
Nick.
Hi there,
you have this CSS:
#site-navigation {
padding: 50px 60px 60px 60px;
}change it to:
#site-navigation,
#sticky-placeholder {
padding: 50px 60px 60px 60px;
}Wahey!
Brilliant, thanks you very much David. Problem solved.
Thank you for the swift reply.
You're welcome :)
