Hello There.
I have been trying to customize the fixed header on my site. Staging domain is testwww.805stats.com/wordpress and I’m using the XTheme. Please help!!!
I would like the header to have a transparent background on top, but an opaque background when the scroll begins and the logo to fit on the background instead of hanging off. I got close with a different code snippet, but it just wasn’t working correctly. (https://xthemetips.com/transparent-fixed-header/129/)
I have already adjusted the logo size on scroll using the following code snippets, which I found in another forum topic (below). However, it doesn’t happen in the right order. I want the logo to start large and shrink on scroll, then go back to large if they scroll back up…
Javascript:
jQuery(document).ready(function($){
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$(‘body.x-navbar-fixed-top-active .x-navbar-wrap’).css(“height”, “65px”);
$(’.x-navbar-inner’).css(“min-height”, “65px”);
$(’.x-brand img’).css(“width”, “100px”);
$(’.x-navbar .desktop .x-nav > li > a’).css({“padding-top”: “30px”, “height”: “65px”});
} else {
$(‘body.x-navbar-fixed-top-active .x-navbar-wrap’).css(“height”, “100px”);
$(’.x-navbar-inner’).css(“min-height”, “100”);
$(’.x-brand img’).css(“width”, “250px”);
$(’.x-navbar .desktop .x-nav > li > a’).css({“padding-top”: “45px”, “height”: “100px”});
}
});
});
CSS:
.x-brand img {
transition: all 0.3s ease;
}
