-
Gregor
Hey there,
I have this issue with the transitions between main-navigation and sticky-navigation.
There’s a jump of just about the equivalent of the nav bar’s height when I scroll, in the moment switches from one navigation to the other.
I do have some additional css in place to place the logo in the center and tried to remove branding, activated and deactivated transition effects. Also my attempts to clean up that custom css didn’t really help./* Center the logo in both mobile and sticky navigation */
.inside-header > .site-branding,
.inside-header > .navigation-branding,
.inside-header > .site-logo,
.site-branding-container,
#site-navigation .navigation-branding .site-logo,
#sticky-navigation .navigation-branding,
#sticky-navigation .site-logo {
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
}
/* Center the logo and add spacing on desktop */
@media (min-width: 768px) {
.inside-navigation {
display: flex;
justify-content: center;
align-items: center;
margin-right: 40px;
margin-top: 60px;
margin-bottom: 20px;
}
} -
Hi there,
1. Change this CSS:
/* Center the logo in both mobile and sticky navigation */ .inside-header > .site-branding, .inside-header > .navigation-branding, .inside-header > .site-logo, .site-branding-container, #site-navigation .navigation-branding .site-logo, #sticky-navigation .navigation-branding, #sticky-navigation .site-logo { position: absolute; left: 50%; transform: translateX(-50%); z-index: 1000; }
to:
#site-navigation .navigation-branding .site-logo, #sticky-navigation .sticky-navigation-logo { position: absolute; left: 50%; transform: translateX(-50%); z-index: 1000; }
2. Change this CSS:
/* Center the logo and add spacing on desktop */ @media (min-width: 768px) { .inside-navigation { display: flex; justify-content: center; align-items: center; margin-right: 40px; margin-top: 60px; margin-bottom: 20px; } }
to:
/* Center the logo and add spacing on desktop */ @media (min-width: 768px) { .inside-navigation { display: flex; justify-content: center; align-items: center; padding-top: 60px; padding-bottom: 20px; } .main-navigation button.menu-toggle { margin-right: 40px; } }
-
Gregor
Thank you for the swift reply and the neat css. This certainly looks steadier now.
But as soon as I publish changes and leave the customizer, it jumps again upon scrolling. See screen recording.
I’ve reactivated/deactivated caching and flushed all minified css. -
I don’t see the jump, this is what I see:
https://app.screencast.com/vMVn3OfbsfGeeHowever, I would recommend removing the
top-margin
of the first container in the content area to look even smoother. -
Gregor
What I mean is the behavior of the initial scroll move. Specifically, I want the content to scroll smoothly behind the sticky navigation as I scroll down, rather than having the initial scroll movement cause the content to jump abruptly and partially hide behind the navigation. I don’t know if there’s a delay or something that causes the image to “jump” up when scrolling is initiated.
It’s the same on the last scroll when scrolling up again.
-
In your case, I would recommend DISABLE the GP sticky navigation option, and use pure CSS to make the navigation sticky.
Try this CSS:
nav#site-navigation { position: sticky; top: 0; }
Adding CSS: https://docs.generatepress.com/article/adding-css/
-
Gregor
Great! That works. Thanks for the amazingly fast support!
-
Glad to hear that 🙂
- You must be logged in to reply to this topic.