Fixed scrolling navigation

Shapely
1

Hi all,

This is less of a question, but more of a suggestion or a find.

I was somewhat unhappy with the way the fixed navigation jumped when it first scrolled. This was caused because scroll had to get to the end of its height before it scrolled, and when it did, the main-container then jumped up the 80px gap left behind by the navigation bar now that it is scrolling…

So… I found the following.

Instead of using the height of the navigation to begin scrolling it, I set it to 0. Actually, I took it one step further and used -1 to ensure that the navigation is ALWAYS scrolling with the window.
I guess this could be set to any number, but added animation would be needed so that it’s a lot smoother when reappearing.

In /shapely/js/shapely-scripts.js, change the lines from 43 as follows:

    // Fix nav to top while scrolling

    cl_nav = $('body .nav-container nav:first');
    cl_navOuterHeight = -1;//$('body .nav-container nav:first').outerHeight();
    window.addEventListener("scroll", updateNav, false);
    updateNav();

Then, in /shapely/styles.css, add the following to where you find ‘.main-container’:

.main-container {
  clear: both;
  margin-top:80px;
}

This maintains the top margin given that the navigation is continually fixed due to the -1…

Hopefully this helps others out a bit

2

Hi @alingham,

I hope you are well today and thanks for your suggestion.

I have notified your suggestion to the theme developer on the following page so that it will be implemented in the future version of theme.

Thanks,
Movin

3

Hi I am having the same problem of the nav bar suddenly jumping, check here:

http://swellendambackpackers.co.za/

But when I go to my theme editor, I don’t have shapely-scripts.js in the list of templates.

Please help?

4

You’ll have to edit scipts.js manually by FTP, rather than inside Wordpress.

5

Thanks – damn, I don’t use ftp for this site, is that the only way?

6

Thanks, this helped me :slight_smile:

7

Really helpful. helped me fix a parallax overlap bug.
Thanks a lot!

8

Ok I found my cPanel and made the change in both the js and css file.

But the problem still seems to be happening: http://swellendambackpackers.co.za/

Could it be something else?