# Sticky Navigation Making Content Jump When Scrolling

**URL:** <https://colorlibsupport.com/t/sticky-navigation-making-content-jump-when-scrolling/25882>\
**Category:** Shapely\
**Created:** [September 3, 2020, 12:36pm UTC](https://colorlibsupport.com/t/sticky-navigation-making-content-jump-when-scrolling/25882 "2020-09-03T12:36:27Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![ericevans](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/e/f4b2a3/32.png) [@ericevans](https://colorlibsupport.com/u/ericevans)\
**Post date:** [September 3, 2020, 12:36pm UTC](https://colorlibsupport.com/t/sticky-navigation-making-content-jump-when-scrolling/25882/1 "2020-09-03T12:36:27Z")

</div>

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/](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](https://eleostech.com)

---

<div class="post-metadata">

**Author:** ![colorlibsupport](https://colorlibsupport.com/user_avatar/colorlibsupport.com/colorlibsupport/32/1494_2.png) [@colorlibsupport](https://colorlibsupport.com/u/colorlibsupport)\
**Post date:** [September 4, 2020, 9:56am UTC](https://colorlibsupport.com/t/sticky-navigation-making-content-jump-when-scrolling/25882/2 "2020-09-04T09:56:17Z")

</div>

hey here

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

---

<div class="post-metadata">

**Author:** ![ericevans](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/e/f4b2a3/32.png) [@ericevans](https://colorlibsupport.com/u/ericevans)\
**Post date:** [September 4, 2020, 12:56pm UTC](https://colorlibsupport.com/t/sticky-navigation-making-content-jump-when-scrolling/25882/3 "2020-09-04T12:56:26Z")

</div>

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.  
https://player.vimeo.com/video/454736324

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.

---

<div class="post-metadata">

**Author:** ![ericevans](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/e/f4b2a3/32.png) [@ericevans](https://colorlibsupport.com/u/ericevans)\
**Post date:** [September 4, 2020, 1:02pm UTC](https://colorlibsupport.com/t/sticky-navigation-making-content-jump-when-scrolling/25882/4 "2020-09-04T13:02:49Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ericevans](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/e/f4b2a3/32.png) [@ericevans](https://colorlibsupport.com/u/ericevans)\
**Post date:** [September 10, 2020, 5:15pm UTC](https://colorlibsupport.com/t/sticky-navigation-making-content-jump-when-scrolling/25882/5 "2020-09-10T17:15:04Z")

</div>

Any thoughts or help on this?

Thanks!

---

<div class="post-metadata">

**Author:** ![colorlibsupport](https://colorlibsupport.com/user_avatar/colorlibsupport.com/colorlibsupport/32/1494_2.png) [@colorlibsupport](https://colorlibsupport.com/u/colorlibsupport)\
**Post date:** [September 11, 2020, 7:26am UTC](https://colorlibsupport.com/t/sticky-navigation-making-content-jump-when-scrolling/25882/6 "2020-09-11T07:26:35Z")

</div>

Hey there

Thank you for updating the ticket,

Try this css code:

```auto
#shapely_home_parallax-4 {
    background: #fff;
}

```

---

<div class="post-metadata">

**Author:** ![ericevans](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/e/f4b2a3/32.png) [@ericevans](https://colorlibsupport.com/u/ericevans)\
**Post date:** [September 11, 2020, 6:02pm UTC](https://colorlibsupport.com/t/sticky-navigation-making-content-jump-when-scrolling/25882/7 "2020-09-11T18:02:58Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![ericevans](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/e/f4b2a3/32.png) [@ericevans](https://colorlibsupport.com/u/ericevans)\
**Post date:** [September 29, 2020, 6:20pm UTC](https://colorlibsupport.com/t/sticky-navigation-making-content-jump-when-scrolling/25882/8 "2020-09-29T18:20:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ericevans](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/e/f4b2a3/32.png) [@ericevans](https://colorlibsupport.com/u/ericevans)\
**Post date:** [October 2, 2020, 3:17pm UTC](https://colorlibsupport.com/t/sticky-navigation-making-content-jump-when-scrolling/25882/9 "2020-10-02T15:17:52Z")

</div>

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.

> **[How to Create a Sticky Floating Navigation Menu in WordPress](https://www.wpbeginner.com/wp-themes/how-to-create-a-sticky-floating-navigation-menu-in-wordpress/)**
>
> Want to create a sticky floating navigation menu in WordPress? Help visitors find their way around your site by creating a sticky floating menu in WordPress.

**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”.**