Мобильное меню, window.resize
 

Понадобилось сделать адаптивную шапку для сайта, задача такая, если размер страницы меньше 1060 пикселей, добавляется элемент с классом mobile-menu и вставляется в шапку, так же должен отключаться JS код для меню, который должен работать на экранах больше 1060 пикселей, но здесь проблема такая, допустим я уменьшаю страницу до 1000 пикселей и загружаю страницу, у меня все нормально, меню не выпадает, как на экранах 1060 пикселей, казалось бы все хорошо, но если я обратно увеличу размер браузера и сделаю больше 1060 пикселей и затем снова уменьшу до 1000 пикселей, код снова заработает на мобильных версиях, как можно это исправить?

как можно это исправить?

window.onresize = function(event){
		if(event.target.innerWidth < 1060 && window.innerWidth){
			if( $('.fly-container').find('.mobile-menu').length === 0 ){
				$('.fly-container').append('<div class="mobile-menu"></div>');
			}
		}
		else if(event.target.innerWidth > 1060 && window.innerWidth){
			$('.ht-nav li').hover(function(){
				$(this).addClass('is-active');
				$(this).find('.nav-dropdown').stop(true,true).fadeIn('300');
			}, function(){
				$(this).removeClass('is-active');
				$(this).find('.nav-dropdown').fadeOut('300');
			});
		}
		else {
			$('.fly-container').find('.mobile-menu').remove();
		}
	};

moslem,
Каким образом у вас отключается код js для мобильных версий?

moslem,

window.onresize = function(){
	if(this.innerWidth < 1060 && window.innerWidth){
		if( !$('.fly-container').find('.mobile-menu').length ){
			$('.fly-container').append('<div class="mobile-menu"></div>');
		}
	}
	else if(this.innerWidth > 1060 && window.innerWidth){
		$('.ht-nav li').hover(function(){
			$(this).addClass('is-active');
			$(this).find('.nav-dropdown').stop(true,true).fadeIn('300');
		}, function(){
			$(this).removeClass('is-active');
			$(this).find('.nav-dropdown').fadeOut('300');
		});
		$('.fly-container').find('.mobile-menu').remove();
	}
};