Archived topic

Sticky nav "flashing" on scroll

8 replies · Started by Marcus on January 22, 2020

Viewing posts 1–9 of 9

January 22, 2020 at 3:10 am #1140029

Hi, on my website I have a sticky nav which I have added some css to (see my other topics, I can't seem to find a profile page to find my older topics sorry).

If you let the page fully load, then scroll down, you'll see the nav "flashes" for a second despite the fact that the nav should only show when you scroll back up.

PS: I actually remember having this same issue about 4-5 years ago haha. I wish I could find my old topic to know how we fixed it.

January 22, 2020 at 8:01 am #1140453

Hi there,

any particular device or browser this happening on? Having trouble seeing the issue.

You can access your older topics via the Forum Profile button at the top of this page.

January 22, 2020 at 4:26 pm #1140820

https://recordit.co/u22GtLsiyp

See how the nav bar appears for a split second as I'm scrolling down? It should only appear when I'm scrolling back up.

I'm using Chrome.

----

PS: these are the two nav related CSS snippets I've added:

#site-navigation:not(.navigation-stick) {
    visibility: hidden;
    height: 0;
    overflow: hidden;
}

#sticky-placeholder {
    display: none !important;
}


.main-navigation .main-nav ul li.nav-button a {
    background-color: #4dc28b;
    line-height: 48px !important;
}

January 22, 2020 at 9:43 pm #1140934

Any chance you can disable your custom CSS and all other plugins except GP Premium to test first?

Thanks :)

January 22, 2020 at 10:42 pm #1140976

Done, it still does the same thing:

https://recordit.co/jW0NjpzXPS

PS: I left this code in because otherwise it wouldn't show the stickynav as intended:



/* only sticky nav */

#site-navigation:not(.navigation-stick) {
    visibility: hidden;
    height: 0;
    overflow: hidden;
}

January 23, 2020 at 10:06 am #1141733

That code is likely the reason for this. What's that custom CSS fixing, exactly?

Let me know :)

January 23, 2020 at 4:32 pm #1142071

It was suggested to me by support in this thread: https://generatepress.com/forums/topic/hide-sticky-nav-until-scroll/

It's from your support docs here: https://docs.generatepress.com/article/show-sticky-navigation-only/

January 23, 2020 at 4:53 pm #1142083

Ah, it seems that code is conflicting with how the sticky navigation only shows when scrolling up. As of right now there's no way for us to know when the sticky navigation is visible when it's set to only display when scrolling up - we'll be addressing this in GPP 1.10.

January 23, 2020 at 11:12 pm #1142236

Alright thanks Tom, I'll keep an eye out for that.

This archived topic is closed to new replies.

Start building better websites today.