Docs

[markw1]

I used -> https://community.theme.co/forums/topic/shrink-menu-logo-upon-scroll-down-back-to-full-size-at-top-again-smoothly/

and added to custom 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("margin-top", "11px");
			$('.x-brand img').css("width", "150px");
			$('.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("margin-top", "20px");
			$('.x-brand img').css("width", "250px");
			$('.x-navbar .desktop .x-nav > li > a').css({"padding-top": "45px", "height": "100px"});
		}
	});
});

and added following to CSS

.x-brand img {
    transition: all 0.3s ease;
}
.x-navbar .desktop .x-nav>li a {
    transition: all 0.3s ease;
}

However the nav bar height and nav link size does not shrink?

What am i doing wrong ?

[markw1]

This reply has been marked as private.

[Joao]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

[markw1]

This reply has been marked as private.

[markw1]

FYI I am using ubermenu for the menu.

[Rad]

Hi there,

It will only work on X’s native menu, Ubermenu has it’s own and different structure. It doesn’t respond the same way native one. Please do switch to standard menu.

Thanks!

[markw1]

[RESOLVED]

Ok, I cannot remove Ubermenu, as I need the megamenu feature.

I have solved.

Fixed the Javascript to:

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("margin-top", "11px");
			$('.x-brand img').css("width", "150px");
      $('.ubermenu-main').css("margin-top", "0px");
		} else {
			$('body.x-navbar-fixed-top-active .x-navbar-wrap').css("height", "100px");
			$('.x-navbar-inner').css("min-height", "100");
      $('.x-brand.img').css("margin-top", "20px");
			$('.x-brand img').css("width", "250px");
      $('.ubermenu-main').css("margin-top", "40px");
		}
	});
});

And altered the CSS to

.x-brand img {
    transition: all 0.3s ease;
}
.ubermenu-main {
    transition: all 0.3s ease;
}

[Rupok]

Glad that you are all set now. Have a nice day!

[Author]

Posts