Hidden header top and show header left

[gnomatech]

Is it possible with theme pro that when scrolling the top header is hidden and the left header is shown?

[lely]

Hello Mauro,

Do you intend to switch this headers on scroll? What I mean is, by default, top header is showing and then when scrolling start it will then be hidden and then left header appears.

It is possible with some JS custom code and CSS. I can guide you but more customization from here would be out of the scope.
1.) On top header, Customize tab > ID field: Add top-bar
2.) On fixed left bar, Customize tab > ID field: Add left-bar
3.) On custom CSS add this to hide the left bar on load:

#left-bar {
  opacity: 0;
  visibility: hidden;
}

4.) On custom JS, add this custom code. This code will do the switch. It will switch which header will be shown on a specific scroll value. Feel free to adjust 450 scroll value accordingly.

(function ($) {
  $(document).ready(function(){
    $('.x-bar-space').css({'flex-basis': 0});
    //var H = $(window).height();
    $(window).scroll(function () {
        
       // set distance user needs to scroll before we start fadeIn
       if ($(this).scrollTop() > 450 ) {
        $('#left-bar').css({'opacity': 1, 'visibility': 'visible'});
         $('#top-bar').css({'opacity': 0, 'visibility': 'hidden'});
          $('.x-bar-space').css({'flex-basis': '7em'});
         
       } else {
          $('#top-bar').css({'opacity': 1, 'visibility': 'visible'});
         $('#left-bar').css({'opacity': 0, 'visibility': 'hidden'});
         $('.x-bar-space').css({'flex-basis': 0});
         }

    });
  });
}(jQuery));

Hope this helps.