Disappearing header

[daddysnack]

Hey there is there anyway to recreate the header activity seen here: https://bandstand.co.uk/

Specifically looking for a sticky header on mobiles that fades on scroll down but fades back in on scroll up?

Many thanks!

[nabeel]

Hi Tariq,

Thank you for reaching out to us. This achieve the similar effect, custom development would be needed which is regretfully outside the scope of our support however I can point you in a right direction. First add the following JS script in the Theme Options > JS:

jQuery(document).ready(function ($) {
  
  'use strict';
  
   var c, currentScrollTop = 0,
       navbar = $('.x-navbar');

   $(window).scroll(function () {
      var a = $(window).scrollTop();
      var b = navbar.height();
     
      currentScrollTop = a;
     
      if (c < currentScrollTop && a > b + b) {
        navbar.addClass("scrollUp");
      } else if (c > currentScrollTop && !(a <= b)) {
        navbar.removeClass("scrollUp");
      }
      c = currentScrollTop;
  });
  
});

Then you can add the following CSS in the Theme Options > CSS:

.x-navbar {
    transition: all 0.5s ease;
}
.scrollUp {
    transform: translateY(-1000px)
}

Please note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps!

[daddysnack]

Thanks for getting back to me so quick unfortunately that didn’t work for me?

@Nabeel

scope

[ruenel]

Hello Tariq,

Sorry if the code did not work out for you. Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Thank you for your understanding.