Glitchy Sticky Header

  • Resolved mevusas

    (@mevusas)


    5 years, 5 months ago

    This maybe harder to reproduce, but the sticky header is glitchy: sometimes when scrolling down it doesn’t appear at the top of the page but instead somewhere in the upper area, but blocking some of the text. this glitch disappears when scrolling al the way up and then down again. Is there anything to be done about it?

    Thanls!

    • This topic was modified 5 years, 5 months ago by mevusas.

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Theme Author Ben Sibley

    (@bensibley)

    5 years, 5 months ago

    Thank you for the explanation. I was able to recreate this same issue.

    Please try adding the following CSS to your site and let me know if it helps:

    .is-sticky #menu-primary-container {
  top: 0 !important;
}

    This code can be added into the Additional CSS section in the Live Customizer (Appearance > Customize).

    Thread Starter mevusas

    (@mevusas)

    5 years, 5 months ago

    Thanks! this didn’t eliminate the problem, I now see that this happens when scrolling down before the page is fully loaded.

    Theme Author Ben Sibley

    (@bensibley)

    5 years, 5 months ago

    I think the comment added to the code is actually preventing it from running:

    // make sure header is sticky
.is-sticky #menu-primary-container {
  top: 0 !important;
}

    It seems odd, but the way CSS works when writing comments with “//” is that the next declaration is commented out, so this is actually canceling the top property.

    You can re-write the comment with the block comment syntax instead, like this:

    /* make sure header is sticky */
.is-sticky #menu-primary-container {
  top: 0 !important;
}

    Please give that a try and then let me know if it helps the header stay fixed at the top of the site.

    Thread Starter mevusas

    (@mevusas)

    5 years, 5 months ago

    Perfect

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

The topic ‘Glitchy Sticky Header’ is closed to new replies.