移动导航未显示在移动 Safari 上

Question

现场直播

https://www.safecolleges.com/

问题

移动导航适用于除 Safari 之外的所有其他设备和浏览器。

说明

我四处寻找一些修复，但似乎没有一个对我有用。我尝试使用导航按钮来删除导航链接 .hamburger { cursor: pointer } 以及其中的任何元素，以确保。

我尝试使用 JS 来强制菜单在单击/点击按钮时显示，方法是访问 style.display 属性并在点击时将其更改为 block。

我什至尝试在按钮本身上做一些肮脏的内联 JS。 onclick="document.querySelector('.mobile-nav').style.display = 'block';" 到目前为止没有任何效果。

奇怪的是，浏览器知道用户何时“点击”汉堡图标。如果我设置alert('hello')，那么我会在电话上收到警报。但由于某种原因，导航链接不会显示。有什么解决办法吗？

代码

树枝

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div id="mobilee-codde" class="navbar-header">

// This should be the only area that needs to be messed with
      <button type="button" class="navbar-toggle collapsed hamburger hamburger--slider" data-toggle="collapse" data-target="#primary" aria-expanded="false" onclick="document.querySelector('.mobile-nav').style.display = 'block';">
        <span class="sr-only">Toggle navigation</span>
        <span class="hamburger-box">
          <span class="hamburger-inner"></span>
        </span>
        <span class="menu">MENU</span>
      </button>
// ends here

      <a class="navbar-brand" href="/"><img src="{{logo.url}}" alt="Safe Colleges Logo" /></a>
    </div>

    <div class="collapse navbar-collapse desktop" id="primary">
      <div class="mobile-nav">
        {% include 'partials/mobile-menu.twig' %}
      </div>
      <div id="menu-barr">
            <div class="col-sm-3">
                  <a href="/"><img src="{{logo.url}}" alt="Safe Colleges Logo" /></a>
            </div>
            <div class="col-sm-9" style="padding:0;">
      <ul class="nav navbar-nav">
        {% for item in menu.get_items %}
        <li class="nav-item{% if item.title == 'Our Proven Solutions' or item.title == 'Hot Topics' or item.title == 'Success Stories' %} dropdown{% endif %}" data-target="{{ item.slug }}"><a href="{{ item.get_path }}" class="{{ item.class }} {{ item.current ? 'active' }} nav-link">{{ item.title }}</a>
        </li>
        {% endfor %}
        <li class="nav-item">
          <form role="search" method="get" id="searchform" class="searchform" autocomplete="off" action="/">
            <div>
              <label class="screen-reader-text" for="s">Search for:</label>
              <input type="text" value="" name="s" id="s">
              <input type="image" src="/wp-content/uploads/search-icon-v2.svg" style="position: relative; top: 10px; color: white; height: 22px; width: 22px;" name="search" alt="Search" class="button" />
            </div>
          </form>
        </li>
        <li class="nav-item"><a href="/free-trial/" class="free-trial-link nav-link">Free Trial</a></li>
      </ul>
            </div>
<div class="clear"></div>
      </div>
      <ul class="nav-drop our-proven-solutions-dropdown" bacon-style="equalHeight" bacon-target=".heading, .item">
        {% for product in proven_solutions_dropdown %}
          <li>
            <a href="{{ product.button_link }}"><h4 class="heading">{{ product.heading }}</h4>
            <div class="item">{{ product.copy|wpautop }}</div>
            <span class="btn btn-primary btn-sm" role="button">{{ product.button_copy }}</span></a>
          </li>
        {% endfor %}
      </ul>
      <ul class="nav-drop hot-topics-dropdown">
        <li>
          <a href="/hot-topics/active-shooter-topic"><img src="/assets/images/target.png" alt="" style="margin-left:-7px; margin-right:10px;" /><h4>Active Shooter</h4></a>
        </li>
        <li>
          <a href="/hot-topics/clery-act"><img src="/assets/images/shield.png" alt="" /><h4>Clery Act</h4></a>
        </li>
        <li>
          <a href="/hot-topics/ghs-compliance-training-prevent-campus-accidents/"><img src="/assets/images/flask.png" alt="" /><h4>GHS Compliance</h4></a>
        </li>
        <li>
          <a href="/hot-topics/save-act-training-students"><img src="/assets/images/student.png" alt="" style="margin-left:-5px; margin-right:13px;" /><h4>Save Act</h4></a>
        </li>
        <li>
          <a href="/hot-topics/title-ix-training-faculty"><img src="/assets/images/books.png" alt="" /><h4>Title IX</h4></a>
        </li>
        <li>
          <a href="/hot-topics/vawa"><img src="/assets/images/user.png" alt="" style="margin-right:18px;" /><h4>VAWA</h4></a>
        </li>
      </ul>
      <ul class="nav-drop testimonials-dropdown" style="display: none;">
        <li>
          <a href="/university-of-north-dakota-case-study-2/"><h4>University of North Dakota Case Study</h4></a>
        </li>
        <li>
          <a href="/fairmont-state-meeting-title-ix-mandates-for-staff-students/"><h4>Fairmont State Case Study</h4></a>
        </li>
        <li>
          <a href="/forsyth-tech-case-study/"><h4>Forsyth Tech Case Study</h4></a>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>







{# <header class="page-header container">
  <div class="row">
    <h1 class="brand" role="banner">
      <a href="/" class="logo"><img src="{{logo.url}}" alt="Safe Colleges Logo"></a>
    </h1>
    <button class="hamburger hamburger--slider" data-toggle="collapse" type="button" data-target="#primary" aria-expanded="false">
      <span class="hamburger-box">
        <span class="hamburger-inner"></span>
      </span>
    </button>
    <nav class="navbar primary-navigation container collapse navbar-collapse" id="primary">
      <ul class="nav navbar-nav">
        {% for item in menu.get_items %}
        <li class="nav-item"><a href="{{ item.get_path }}" class="{{ item.class }} {{ item.current ? 'active' }} nav-link">{{ item.title }}</a></li>
        {% endfor %}
        <li class="nav-item">
          <form role="search" method="get" id="searchform" class="searchform" autocomplete="off" action="/">
            <div>
              <label class="screen-reader-text" for="s">Search for:</label>
              <input type="text" value="" name="s" id="s">
              <input type="image" src="/assets/images/magnifying-glass.png" name="search" alt="Search" class="button" />
            </div>
          </form>
        </li>
        <li class="nav-item"><a href="" class="free-trial-link nav-link">Free Trial</a></li>
      </ul>
    </nav>
  </div>
</header> #}

Answer 1

我在你的网站上玩过，我可以通过从 .navbar-default #primary 类中删除 z-index:0; 让它在 safari 中工作，它似乎仍然在 chrome 中工作。

这也是有问题的 div

<div class="navbar-collapse desktop collapse in" id="primary" aria-expanded="true" style="">

不确定这是否是最佳解决方案，因为我不确定您是控制 css 还是使用库。