Fixed header in half height after scrolling down

[McKnule]

From another theme, I know a function in which, after scrolling down, the header is displayed at about half height as normal and also a smaller company logo appears (see picture).

Is there something like that also in X-Theme?

Thanks in advance.

Best regards
Ingo

[nabeel]

Hi Ingo,

Thank you for reaching out to us. In X you can do it with custom scripting, try adding the following code in the Theme Options > JS:

jQuery(document).ready(function($){
	$(window).scroll(function(){
		if ($(this).scrollTop() > 100) {
			$('body.x-navbar-fixed-top-active .x-navbar-wrap').css("height", "60px");
			$('.x-navbar-inner').css("min-height", "60px");
			$('.x-brand img').css("width", "90px");
			$('.x-navbar .desktop .x-nav > li > a').css({"padding-top": "35px", "height": "60px"});
		} else {
			$('body.x-navbar-fixed-top-active .x-navbar-wrap').css("height", "120px");
			$('.x-navbar-inner').css("min-height", "120px");
			$('.x-brand img').css("width", "130px");
			$('.x-navbar .desktop .x-nav > li > a').css({"padding-top": "70px", "height": "120px"});
		}
	});
});

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Thanks!

[McKnule]

Hi Nabeel,
thanks for your answer. That works perfect.
But the company logo now has no margin at the bottom.
Is there a way to change this as well?

Thank you.

Regards
Ingo

[thai]

Hi There,

To add the bottom for the logo when the navbar is fixed, please add this custom CSS under Theme Options > CSS:

.x-navbar.x-navbar-fixed-top a.x-brand.img {
    margin-bottom: 15px;
}

Hope it helps

[McKnule]

Hi Thai,

that did it exactly.

Thank you very much

[nabeel]

Glad we could help.

Cheers!