Question

我正在研究这个项目：https://kickit.gr/，而我在野生动物园浏览器上的主页移动菜单（仅！）有问题。

单击“汉堡包”按钮时，即使菜单打开并可以单击，菜单也不可见！

移动菜单有效<750px屏幕宽度。

我没有iPhone，通过带有虚拟野生动物园浏览器的网站进行的调试效果不佳。我尝试过更改一些CSS，但是没有运气...

您可以在实时网站上检查问题。

以下是大多数相关代码：

function hamburgerButtonClick() {
  var hamburger = $('.hamburger');
  var menu = $('.menu');

  var is_active = 'is-active';
  var mobile_menu = 'mobile_menu';

  if (!hamburger.hasClass(is_active)) {
    hamburger.addClass(is_active);
    menu.addClass(mobile_menu);
  } else {
    hamburger.removeClass(is_active);
    hamburger.removeClass(mobile_menu);
    menu.removeClass(mobile_menu);
  }
}

.sticky_menu .menu {
  display: block;
  text-align: center;
  padding-top: 30px;
  margin: 0 auto;
  float: none;
}

.mobile_menu {
  display: block !important;
  width: 100%;
  position: fixed;
  top: 70px;
  background: #191b1a;
  padding-top: 10px;
  color: #ffffff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="sticky_menu" id="sticky_menu">
  <div class="menu_holder">
    <div class="logo"></div>
    <button class="hamburger hamburger--spin" type="button" onclick="hamburgerButtonClick()">
                <span class="hamburger-box">
                    <span class="hamburger-inner"></span>
                </span>
            </button>
    <div class="menu">
      <ul>
        <li></li>
      </ul>
      <div class="social_menu_mobile"></div>
    </div>
  </div>
</nav>

.is_active类用于制作汉堡菜单图标的动画，我认为这与问题无关。

感谢您的帮助！

Answer 1

在Safari iOS中，Add a large block of text显然存在一些问题。

我在header_frontpage.css中删除了针对该节点的属性。现在可以正常使用了。

Safari浏览器上的网站移动菜单已损坏

1 个答案: