Content jump when sticky header activates

  • Resolved Carl Gross

    (@carlgross)


    1 month, 3 weeks ago

    Hello.

    I’ve used your plugin to configure my sticky header. I notice that when a user scrolls down, and the sticky header activates, there is a noticeable jump in the header content, as the sticky header sort of ‘snaps’ into position. Does that make sense? What are ways to eliminate, or alleviate this?

    I believe I’ve configured my sticky header so it is identical in width/height/padding/etc to my normal desktop header.

    Thanks in advance.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support Divyang Chaudhary

    (@divyangposimyth)

    1 month, 2 weeks ago

    Hello @carlgross

    Thanks for the detailed explanation. That “snap” happens because the header leaves the normal page flow when it becomes fixed, causing content to jump up.

    To fix this, please add the following custom CSS to your site (Appearance > Customize > Additional CSS):

    .she-header-yes.header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}
body {
    padding-top: 80px;
}

    Just adjust the 80px value to match your actual header height if needed. After adding this, clear any cache on your site so the changes reflect right away.

    Let us know how it goes!

    Best Regards.

    Thread Starter Carl Gross

    (@carlgross)

    1 month, 2 weeks ago

    OK that worked. Thanks very much. We can consider this resolved.

    Plugin Support Divyang Chaudhary

    (@divyangposimyth)

    1 month, 2 weeks ago

    @carlgross Anytime!
    Thank you for the confirmation:)

Viewing 3 replies - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.