响应式菜单不适用于 WordPress

Question

当我将我的网站转换为 WordPress 时，我意识到我的响应式菜单无法正常工作。 ul 不是隐藏菜单并显示应该切换菜单的汉堡按钮，而是始终可见，并且似乎不受任何 jquery 代码的影响。有人会碰巧对如何纠正这个问题有任何想法吗？ 提前感谢大家的关注。

HTML：

<nav>
  <a href="#" id="burger_menu"><i class="fa fa-bars"></i></a>
  <?php
    wp_nav_menu(array(
      'theme_location'  => 'primary',
      'container'       => 'div'
    ));
  ?>
</nav>

CSS：

header nav #burger_menu {
  padding-right: 20px;
  font-size: 40px;
  display: none;
  color: #fff;
}

header nav .menu ul {
  display: block;
  line-height: 0;
}

header nav .menu ul li {
  padding: 10px;
  display: inline-block !important;
  float: left;
}

@media screen and (max-width: 1023px) {
  /* NAV */
  header nav #burger_menu {
    display: inline-block;
  }

  header nav ul {
    background: rgba(98,194,210,0.85) !important;
    line-height: 10px !important;
  }

  header nav ul,
  nav:active ul {
    display: none !important;
    position: absolute;
    padding: 20px 40px;
    background: #62c2d2;
    right: 0;
    top: 80px;
    width: 30%;
  }
}

jQuery:

//RESPONSIVE NAV
$('#burger_menu').on('click', function(e) {
  e.preventDefault();
  $('header ul').toggle();
  $('header ul').mouseleave(function() {
    $('header ul').css('display', 'none !important');
  });
});

Answer 1

您绑定click event 两次，其中第一次用于显示，第二次用于隐藏菜单，因此当您单击链接时，它将立即显示然后立即隐藏，因此请尝试使用toggle() 之类的，

//RESPONSIVE MENU
$('#burger_menu').on('click', function(e) {
    e.preventDefault();
    $('header nav .menu ul').toggle();
}

Answer 2

您似乎使用了错误的媒体查询。查找较小屏幕的媒体查询，还是只使用一个？

@media screen and (max-width: 1023px)

在适用的情况下，还将 px 更改为 %。

如果你能发布一个 url 或 dev url，我会更有帮助。