How to create a nav bar that hides on scroll down and shows on scroll up, using X Theme.

I foraged around the net for a good long while trying to figure out how to achieve this effect (which you can see on our site) as a designer who is a total noob with custom development. Eventually found the solution on Codepen, and tweaked it a bit to suit the X theme’s setup. Without further ado:

First, make sure your header is set to not sticky in the header options. Then, add the following custom CSS to Theme Options:

.x-bar {
   transition: all 0.5s;
   position: fixed;
   width: 100%;
 }

.x-bar.scrollUp {
  transform: translateY(-65px);  
  /*replace this pixel amount with the height of your nav bar*/
}

Then add the following to the custom JS area in Theme Options:

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

   $(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;

  });
});

And that’s it! This method should also work with other themes if you replace the .x-bar class with the relevant navbar class.