[Resolved] Sticky header causing vertical jump on scrolling – Padding on container element

[Nick]

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.

[David]

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;
}

[Nick]

Wahey!

Brilliant, thanks you very much David. Problem solved.

Thank you for the swift reply.

[David]

You’re welcome 🙂

[Author]

Posts