Hi guys,
I hope can count again on your wisdom.
I want to make a transparent header(I have Pro but it’s too much of a hassle to produce it) so want to make it with the regular X theme header. I achieve to produce a solid color header, as the section is still below the header and otherwise, the logo and text can’t be seen. If one scroll, it turns out to be transparent.
But I like to have it the other way around and start with a transparent header(which lays on top of the first section, very important), after which converted to a header with an opacity of let’s say 50%.
I hope you guys can help me out, have been struggling with it for a while now :-).
The current codes used:
JS:
jQuery(document).ready(function($) {
$(window).scroll(function() {
var scrollPos = $(window).scrollTop(),
navbar = $('.x-navbar');
if (scrollPos > 300) {
navbar.addClass('alt-color');
} else {
navbar.removeClass('alt-color');
}
});
});
CS:
.x-navbar {
background-color: #000000 !important;
-webkit-transition: all .3s;
transition: all .3s;
}
.x-navbar.alt-color {
background-color: transparent !important;
}
.masthead {
height:0;
}
@media (max-width:979px){
.x-nav-wrap.mobile.collapse,.x-navbar .sub-menu {
background-color: #000;
padding: 20px;
}
}