Sticky Navigation Making Content Jump When Scrolling

Shapely
1

Hello!

I’m trying to find a solution to stop my content from “jumping” up when scrolling. The content jumps up when the navigation reappears when I have it set to be sticky.

I found this post from 4 years ago, but I can’t seem to get it working.
https://colorlibsupport.com/t/fixed-scrolling-navigation/

Could someone please help me? It’s quite annoying when there is simple page content under a parallax section. Sometimes the text gets pulled up against the parallax image.

My site: https://eleostech.com

2

hey here

Can you please add a little bit more details? not clearly understand which section of the website jumps and when

3

Sure.

There are a few items that move when the navigation menu reappears.

  1. The content below the main header image shifts up by 30-80 pixels (I can’t quite tell).
  2. The text in the main header section also shifts up by the same amount.

Here is a short video to hopefully show what is happening.

The content shifts back to the correct position when scrolling all the way back to the top when the navigation menu is back in it’s original position. I’m not sure what JS or other code is being used to make the navigation menu “sticky”, but based on the content’s shifting I would assume it is removing the navigation section from the HTML and placing it “on top” of the page when scrolling past the ‘sticky’ point.

4

The shift happens when the css classes on the navigation menu changes from:

<nav id=“site-navigation” class=“main-navigation” role=“navigation”>

to

<nav id=“site-navigation” class=“main-navigation outOfSight fixed scrolled” role=“navigation”>

The addition of ‘fixed scrolled’ makes the content shift up when scrolling down the page.

5

Any thoughts or help on this?

Thanks!

6

Hey there

Thank you for updating the ticket,

Try this css code:

#shapely_home_parallax-4 {
    background: #fff;
}
7

That didn’t make a difference in the content jumping.

I’m not sure how changing a background color to white would affect when a section of HTML is removed from the page like what I’m assuming is happening with some JS to have the menu bar float above the content when it’s “sticky”.

Any other suggestions or thoughts?

8

Still looking for a fix for page content shifting when site-navigation classes are changed from “main-navigation” to “main-navigation outOfSight fixed scrolled”.

9

Here’s an update…

Since the content jumps with the “sticky nav” turned on and the content does not jump with “sticky nav” turned off, I turned it off and followed the tutorial from WPBeginner.

Specifically, I followed Method 2 for adding css code manually.

Here are a few changes I made to their stock code:

  • I changed 'site-navigation' to 'masthead as I plan to add a secondary top nav above my main navigation.
  • I added margin-top to the 'content' css id that matched the height of my masthead so all of my content was in the correct position.
  • I removed 'text-align: center;' as it made the mobile nav centered and I don't want it centered.
  • I added '#masthead {position: absolute;}' in my mobile media query so the nav is not sticky for mobile devices.

The only thing I’m missing from this implementation is the animation of the nav “reappearing” when scrolling, but that is minor considering there is no content jump now.

I highly recommend you all consider adjusting the method in which Shapely handles a “sticky nav”.