Mobile nav at larger breakpoint - fix works but nav jumps

[weejimmyhat]

I’d like to increase the breakpoint for mobile nav from the default 980px to 1299px.

I’ve used the following solutions, found in the support forums:

CSS:

@media ( max-width: 1299px ) {

.x-nav-wrap.desktop {
display: none;
}
.x-btn-navbar {
display: block;
float: right;
}
.x-nav-wrap.mobile.in, .x-nav-wrap.mobile.collapsing {
display: block;
}

}

Custom JavaScript:

jQuery(document).ready(function($){
	$('.x-btn-navbar').click(function(){
		if($(".x-nav-wrap.mobile").is(':visible')){
			$('.x-nav-wrap.mobile').css({"display": "none", 'height': 'auto'});
		}
		else{
			$('.x-nav-wrap.mobile').css({"display": "block", 'height': 'auto'});
		}
	});
});

The nav now displays on larger sized screens as expected, and clicking the hamburger does show / hide the nav - however, the nav no longer slides / eases smoothly up and down - it just jumps open / closed.

Any idea how I can reinstate this functionality?

Thanks.

[rad]

Hi there,

Thanks for writing in.

It’s due to that javascript that you added, you simply set the height statically without easing. In fact, the CSS alone should be enough , please remove the javascript.

Thanks!