Sticky Navigation

  • Resolved xeon826

    (@xeon826)


    9 years, 2 months ago

    Hello all. I’m trying to implement a sticky navbar ( http://codepen.io/anon/pen/evMVpO?editors=1111 ) on the GeneratePress theme and I got it working but when the navbar becomes fixed, everything on the page jumps up about the same height as the nav bar. I’m thinking that it’s because when the navbar becomes fixed, all of the other objects on the page stop using it as a reference for positioning. Is there a way to fix this?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    9 years, 2 months ago

    Add padding to the top of your main content area that’s the same number of pixels as your navbar eats up.

    Thread Starter xeon826

    (@xeon826)

    9 years, 2 months ago

    That did it, thanks a bunch.

    Thread Starter xeon826

    (@xeon826)

    9 years, 2 months ago

    Ah, I might’ve jinxed it. I editted the jQuery to look like this

    <script>
;(function($){
var  mn = $(".menu");
    mns = "main-nav-scrolled";
    hdr = $('header').height();

$(window).scroll(function() {
  if( $(this).scrollTop() > hdr ) {
    $(".site-content").attr('style', 'padding-top: 100px !important');
  } else {
   $(".site-content").attr('style', 'padding-top: 0px //!important');
    mn.removeClass(mns);
  }
});
})(jQuery);
Fixed it: just added 50 px padding to the else block.
</script>

    This almost functions well but the thing is, the “else” block doesn’t load until there’s a scroll event. (I guess the jQuery doesn’t launch until something happens) so I’m trying to find out how to possibly run the jQuery before the page loads. As it is, what happens is that, the page loads and the once there’s at least a small bit of scrolling, the else block is launched. Currently I’m using a WP Header/Footer Plugin for loading the scripts. Maybe they have to be loaded another way?

    Edit: fixed it, just added 50px padding to the else block.

    • This reply was modified 9 years, 2 months ago by xeon826.
    • This reply was modified 9 years, 2 months ago by xeon826.
    • This reply was modified 9 years, 2 months ago by xeon826. Reason: Solved
Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Sticky Navigation’ is closed to new replies.

Tags