Блог

Итак, вот мой сайт:https://www.vargdesign.net /

При изменении размера окна < 1024 пикселей мобильный css будет отображать значки мобильного меню. При открытии меню и изменении размера окна обратно на рабочий стол (> 1024 пикселей) значки меню больше не скрываются. Я пробовал несколько разных способов написания скрипта в jQuery для него, но я не нашел решения за 3 часа.

Веб-сайт основан на WordPress, и я сам создал тему.

Фрагмент PHP:

 <header>
  <div class="head">
    <?php the_custom_logo(); ?>
    <div class="menu-toggle">
      <i id="menu-open" class="fas fa-bars"></i>
      <i id="menu-close" class="fas fa-times"></i>
    </div>
    <nav>
      <?php wp_nav_menu(array('theme_location'=>'main')); ?>
    </nav>
  </div>
</header>
  

Скрипт:

 // add mobile menu toggle
function menu_toggle() {
  var navToggle = 1;
  // open menu on click
  function menu_open() {
    $('#menu-open').hide();
    $('#menu-close').show();
    $('nav').addClass('pull-down');
    var navToggle = 2;
    // lock scroll position, but retain settings for later
    var scrollPosition = [
      self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
      self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
    ];
    var html = jQuery('html');
    html.data('scroll-position', scrollPosition);
    html.data('previous-overflow', html.css('overflow'));
    html.css('overflow', 'hidden');
    window.scrollTo(scrollPosition[0], scrollPosition[1]);
  }
  if (navToggle = 1) {
    $('#menu-open').click(menu_open);
  }
  // close menu on click
  function menu_close() {
    $('#menu-close').hide();
    $('#menu-open').show();
    $('nav').removeClass('pull-down');
    var navToggle = 1;
    // unlock scroll position
    var html = jQuery('html');
    var scrollPosition = html.data('scroll-position');
    html.css('overflow', html.data('previous-overflow'));
    window.scrollTo(scrollPosition[0], scrollPosition[1]);
  }
  if (navToggle = 2) {
    $('#menu-close, .content').click(menu_close);
  }
}

$(document).ready(menu_toggle);
  

Я думаю, что самым простым решением было бы просто написать некоторый CSS, чтобы гарантировать, что они будут скрыты, когда ширина области просмотра больше или равна 1024px, например:

 @media only screen and (min-width: 1024px) {
   .menu-toggle   nav {
      display: none;
   }
}