实时站点
https://www.safecolleges.com/
问题
移动导航在除Safari以外的所有其他设备和浏览器上工作。
描述
我环顾四周，寻找一些修复程序，似乎没有一个为我工作。我尝试给出导航按钮以删除导航链接.hamburger { cursor: pointer }以及其中的任何元素，只是为了确保。
我已经尝试使用JS强制菜单以显示按钮时通过访问style.display属性并在单击时将其更改为block时显示。
我什至尝试在按钮本身上执行一些肮脏的内联JS。onclick="document.querySelector('.mobile-nav').style.display = 'block';"，到目前为止什么都没有。
怪异的部分是，浏览器知道何时'taps;汉堡图标。如果我设置了alert('hello')，那么我会在电话上获得警报。但是由于某种原因，导航链接不会显示。有什么解决方案？
代码
twig
<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> #}
我与您的网站一起玩了，我能够通过从类.navbar-default #primary中删除z-index:0;来使其在Safari中使用，它似乎仍然可以在Chrome中使用。
这是有问题的div
<div class="navbar-collapse desktop collapse in" id="primary" aria-expanded="true" style="">
不确定这是最好的解决方案，因为我不确定您是控制CSS还是正在使用库。