Nav menu collapse to Mobile Width

Hi I am try to adjust width when my Mobile nav menu kicks in with the following css which works but the menu stops working. Please help

@media (max-width: 1260px) {
.masthead-inline .x-btn-navbar {
display: block;
float: right;
}
.x-nav-wrap.desktop {
display: none;
}
.x-nav-wrap.mobile.collapse {
display: none;
}
.x-nav-wrap.mobile.collapse.in {
display: block;
}
}

Hi There,

Please also add this code under Customizer > Custom > Global Javascript:

jQuery(document).ready(function($){
	$('.x-btn-navbar').click(function(){
		$(".x-nav-wrap.mobile").toggleClass('menu');
		if($(".x-nav-wrap.mobile").hasClass('menu')) {
			$(".x-nav-wrap.mobile").css('height', 0);
		}
		else {
			$(".x-nav-wrap.mobile").css('height', 'auto');
		}
	});
});

If it doesn’t work, please provide us with your website URL so we can take a closer look.

Thanks.