NavBar Transition causes Rev Slider Video Shift when scrolling

[NickMacedo]

Hi,

I have implemented a transparent header that becomes opaque when scrolling. However, when I scroll down, the Rev Slider in the section below goes from Full Screen to maybe 2/3 the width of the screen. It does not happen when I am not using the Transparent/Opaque header codes.

The codes I am using are as follows

CSS:
.x-logobar {
display: none;
}

.masthead {
height:0px;
}

.x-navbar {
background-color: rgba(255,255,255,0.0) !important;
border: 0;
}
.x-logobar{
background-color: rgba(255,255,255,0.0) !important;
}
.home .masthead {
position: absolute;
width: 100%;
}
.x-navbar .desktop .x-nav li>a>span:after {
display: none;
}
body .x-navbar.x-navbar-fixed-top {
background-color: #2D2D2D !important;
transition: ease-in 1s;
}

JAVA:
jQuery(function($){
var $navbar = $(’.x-navbar’);
$(window).scroll(function(event) {
var $current = $(this).scrollTop();
if( $current > 0 ){
$navbar.addClass(‘x-navbar-fixed-top’);
} else {
$navbar.removeClass(‘x-navbar-fixed-top’);
}
});
});

[friech]

Hi @NickMacedo,

Thank you for writing in, please removed that .masthead {height:0px;} from your custom CSS, and adjust the height of the header on Theme Options > Headers > Top Height instead, maybe at least 126px so it will fit the logo plus its top/bottom margins.

Please note that we can not provide further support on this customization, you can avail of our ONE service instead where you can ask any questions you have for a single platform or multiple platforms depending on the package that you choose.

Or you can upgrade to the PRO theme where it has a header builder, footer builder, and layout builder, where you can achieve that scrolling effect on the header without customazation.

Cheers,