About Header Builder. X-BAR transparent on top, disappear on scroll down, show on scroll up with solid color

Support
#1

Dear Themeco team.
I am a Pro unlimited. I am using header builder since I want that my header is shown at the top page with transparent background, then, if you scroll down, the X-BAR disappear until the user will scroll up so the X-BAR is shown again but with a solid background color.

This is the Dev-website: https://wp.gruppocastaldi.it

I am using this CSS in the Global customizer

> .x-bar {
   transition: all 0.5s;
   position: fixed;
   width: 100%;
 }
.x-bar.scrollUp {
  transform: translateY(-65px);  
	background-color: rgba(35, 35, 35, 0.4);

}

and this JS in the JS Global Customizer

> 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;
  });
});

Please, could you be so kind to help me?

#2

Hello Alessio,

Thanks for writing in! The actual height of your Bar element is 96 pixels. You only have translated it to 65px only. You should be translating it more than the actual height. By the way, please check out this old thread:

Be advised that custom coding is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Please note that with custom coding, you will have to maintain any custom coding to make sure that it will still work after any updates or does not create any issues or incompatibility in the future.

Best Regards.

#3

Thank you Ruenel, you have been very kind. Anyway I tried the code you suggested me but, I don’t know why, it doesn’t work for me. I would like to have my BAR transparent at the beginning, hide when the user scroll- down and Show when the user scroll up but width a solid color.
I hope to meet in this forum a “css-angel” :slight_smile:

#4

Hi Alessio,

I would suggest you go through the following thread and follow the instruction given to make the Header primarily transparent and then change the background color as you want.



Hope it helps.
Thanks

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.