[Resolved] Sticky Navigation Shifting Main Content

[Austin]

Is it possible to keep the main content page from shifting down when the sticky navigation takes effect? When the primary navigation disappears and the sticky navigation comes into view, the content pages shift down. This is causing an CLS error.

Thanks

[Leo]

Hi there,

Are you using any transition effects?

[Austin]

Hey Leo,

I have tried all 3 options associated with the sticky header (none, fade, slide) and all throw the same issue…

[David]

Hi there,

can you share a link to the site where we can see the issue ?

[Austin]

Hey David,

The site is: https://golfhomes.servebolt.us/

I am not sure if they are related, but the issue is much more exaggerated on mobile devices.

Thanks,

[David]

I am not seeing any issue with the Sticky Navigation.
What i do see is the main content styles being loaded after the page is first rendered. This is due to the WP Rocket Critical (optimized) CSS delivery option. Unless you know how to manually generate the required CSS you should disable that feature.

[Austin]

Hey David,

I have tried your suggestion and it hasn’t changed anything. I am not sure if you are using safari or chrome? I have sourced the problem to the sticky navigation due to when it is on, the page shifts, when it’s off the page doesn’t shift down. Even if not looking to address the CLS issue, can the the page shift issue be fixed or is it just part of the sticky?

[Austin]

I have logged out and tested on both safari and chrome and it seems to be an issue in only safari and iOS.. Any suggestions on how to address this or its just the way it is? Thanks again for the help

[Elvin]

Hi there,

I’ve checked your site as well and I don’t see this issue as well. Here’s what I see on my end:
https://share.getcloudapp.com/mXup7lyl

As you can see in the video, there are no weird “jumps” or “shifts”. But perhaps we’re missing something.

Any chance you could provide a screen recording of what you see as a “shift”? The sticky feature sets the navigation as “position: fixed;” when it’s not on the top of the page and then swaps back to “position: static” when it’s back to the top.

[Austin]

Hey Elvin,

Yeah I don’t mind sharing a screen shot of what I see on my end. Do I use the same program you are using?

[Elvin]

Hey Elvin,

Yeah I don’t mind sharing a screen shot of what I see on my end. Do I use the same program you are using?

You can stick w/ what you want to use.

I personally use CloudApp but others prefer to use Loom and/or Screencast. 🙂

[Austin]

Hey Elvin,

See if this works? I tried a screen recording to show what I see on my side. Maybe Im just being picky, but the page content shifts down, and when scrolling back up there is a large delay white space before the header reappears.

[Austin]

https://www.loom.com/share/694fb47d20264c09a64558d26e9cbe0e

[Austin]

It seems to work smooth on google chrome desktop, but still choppy like the video shows on safari desktop, iOS safari mobile, and chrome mobile

[David]

Aah it only shows up on smaller devices – and the reason for that is the Search widget is added to the Sticky Nav Placeholder which increases its height. Add this CSS to stop that from interfering:

#sticky-placeholder .sidx-container {
  height: 0;
  display: none;
}

[Author]

Posts