Я создал мобильное адаптивное меню, в котором я заменил значок и отобразил / скрыл меню.
Первый Главное меню навигации работает нормально, я изменяю размер экрана и перемещаюсьна мобильную версию. Затем Я нажал на меню гамбургера, все работало нормально. Когда я снова увеличиваю размер окна, главное навигационное меню не отображается. Таким образом, проблема заключается в , мое главное навигационное меню исчезает, когда я перехожу с размера 767 пикселей на полный экран.Я использовал ионные значки, где ion-navicon-round - меню гамбургеров, а ion-close-round - большой значок x.
Здесь описана ситуация,изображений.Первое: в полноэкранном режиме 
Это адаптивное меню.
Меню навигации исчезло.
Это мой HTML-код для меню навигации.
<!-- HTML code -->
<ul class="main-nav js--main-nav">
<li><a href="#features">Food delivery</a></li>
<li><a href="#works">How it works</a></li>
<li><a href="#cities">Our cities</a></li>
<li><a href="#plans">Sign up</a></li>
</ul>
<a class="mobile-nav-icon js--nav-icon"><i class="ion-navicon-round"></i></a>
Вот код Jquery, который я использовал для отображения и скрытия адаптивного меню..
/* Mobile Navigation*/
$('.js--nav-icon').click(function() {
var nav = $('.js-main-nav');
var icon = $('.js--nav-icon i');
nav.slideToggle(200);
if(icon.hasClass('ion-navicon-round')){
icon.addClass('ion-close-round');
icon.removeClass('ion-navicon-round');
$(".js--main-nav").slideDown();
}
else {
icon.removeClass('ion-close-round');
icon.addClass('ion-navicon-round');
$(".js--main-nav").slideUp();
}
});
var width = $(window).width();
$(window).resize(function(){
if(width >= 768){
$(".js--main-nav").slideDown();
}
});