Docs

[kateanita]

Hello, on http://dev.stapkodesign.com/ my slider looks fine. Then when you scroll down, and scroll back up, the whole thing is pushed up and partially hidden under the header.

I tried this and it worked after scrolling, but when you reload the page the whole thing is pushed down.

.forcefullwidth_wrapper_tp_banner {
margin-top: 130px !important;
}

I saw another post about this, but the answer was a media query for a specific width which I don’t think solves this specific problem.

Thank you!

Katie

[Nico]

Hi There,

Thanks for writing in.

Upon checking your setup, scrolling down won’t affect your header. Would you mind sharing us a screenshot of the problem and the details of the browser you used so we could replicate your setup in our side.

Thank you so much.

[kateanita]

Sure – it’s not super pronounced but you can see in the attached screenshots the second is definitely further up – and when you initially scroll down it sort of does a weird jump and then the scroll down button (gold circle) appears.

I’m on Chrome currently but it does it on Firefox and Safari as well (I’m on a Mac, don’t know if that matters). It’s the worst on Safari because it actively kind of jumps up and down.

[kateanita]

Sure – it’s not super pronounced but you can see in the attached screenshots the second is definitely further up – and when you initially scroll down it sort of does a weird jump and then the scroll down button (gold circle) appears.

I’m on Chrome currently but it does it on Firefox and Safari as well (I’m on a Mac, don’t know if that matters). It’s the worst on Safari because it actively kind of jumps up and down.

[kateanita]

Also – the “scroll down” arrow doesn’t appear until you actually scroll down. I tried it both using the built-in scroll down arrow feature in the page options and as a custom button as a global layer and both solutions had the same issue. Any insight would be greatly appreciated.

Thanks very much,

Katie

[Rue Nel]

Hey Katie,

Thank you for the clarifications! To resolve this issue, please add the following JS code in the customizer, Appearance > Customize > Custom > Javascript

jQuery(function($) {
  var $body   = $('body');
  var $navbar = $('.x-navbar');
  if ( $body.hasClass('x-navbar-fixed-top-active') && $navbar.length > 0 ) {
    $(window).scroll(function() {
      if ( $(this).scrollTop() >= 150 ) {
        $navbar.addClass('x-navbar-fixed-top');
      } else {
        $navbar.removeClass('x-navbar-fixed-top');
      }
    });
  }
});

Hope this helps. Please let us know how it goes.

[kateanita]

You guys are awesome! Thanks for the quick response. This is almost perfect and fixed the issue except now the header scrolls up to the top of the screen and out of view until you reach a certain point, then pops back down into place. Is there a way to get the header to just stay there without moving at all on scroll?

I’ve left the new code in if you want to take a look: http://dev.stapkodesign.com/

Thanks again!
Katie

[Rad]

Hi there,

Please try this,

jQuery(function($) {
  var $body   = $('body');
  var $navbar = $('.x-navbar');
  var $scrollTop = 0;

  if ( $body.hasClass('x-navbar-fixed-top-active') && $navbar.length > 0 ) {
    $(window).scroll(function() {
      
      if ( $(this).scrollTop() <= $scrollTop ) return; //If user is scrolling up, then do nothing

      if ( $(this).scrollTop() >= 150 ) {
        $navbar.addClass('x-navbar-fixed-top');
      } else {
        $navbar.removeClass('x-navbar-fixed-top');
      }
      
      $scrollTop = $(this).scrollTop();

    });
  }
});

You may also provide your login credentials in private reply for direct testing.

Thanks!

[kateanita]

This reply has been marked as private.

[Rue Nel]

Hello There,

The code isn’t working again because you have inserted an incomplete code.

I already have updated the code. Please check your site again.

[kateanita]

Thank you for looking into it but the header is still jumping after you scroll, and when you scroll up, the revolution slider content is shoved up under the header and is partly concealed. The second version of code was working better – any other ideas?

Thanks, Katie

[Paul R]

Hi Katie,

To fix it, you can add this under Custom > Edit Global Javascript in the Customizer.

jQuery(function($) {
     $(window).scroll(function() {
      
      if ( $(this).scrollTop() <= 0){
          $('.x-navbar').removeClass('x-navbar-fixed-top');
      }
});
    
});

Then add this in Custom > Edit Global CSS

body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: 150px !important;
}

Hope that helps

[kateanita]

Thank you so much that fixed it!!

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts