Zurb Foundation 5-顶部栏-在小浏览器窗口中折叠，但在移动设备上不折叠

Question

从文档页面提取了代码

<nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <li class="name"> 
[etc...]
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

结果是，折叠浏览器桌面窗口会生成菜单图标和活动的子项目链接。

在Chrome普通桌面模式下，它会按预期崩溃。但是，当访问Chrome的开发者工具时， 所有移动渲染都不会生成菜单图标（而且显然都不是子项）。

已验证各种问题...在body标签末尾加载所有基础javascript不会改变行为。 对于在foundation.css之后加载的移动实例，使用自定义css类删除文件不会更改行为。 除了robots.txt之外，没有应用程序代码调用user-agent 。

以下内容可能相关，但我相信它是随基本代码一起提供的：

meta.foundation-mq-topbar {
  font-family: "/only screen and (min-width:40.063em)/";
  width: 58.75em; }

因此，菜单是在小型桌面屏幕上生成的，而不是在移动屏幕上生成的。

如何解决？ 是否有基础配置以某种方式禁用了此移动逻辑？

Answer 1

不是预期的答案。 和一个kudge启动。 但我还是无法查明原因的触发没有发生（而在其他情况下，适当的样式被应用到small视窗与基金会的CSS）。

本质上是通过下拉菜单换出一侧，重新创建菜单。

太...这是一个Rails应用程序，与浏览器gem （ if browser ， if browser条件）和真棒字体gem结合使用 ，可以更快地生成汉堡图标，以下方法可以解决问题，呃... kludge。

<!-- Right Nav Section -->
<ul class="right">
<% if browser.mobile? %>
  <li class="has-dropdown">
    <a href="#menu"><i class="fa fa-bars"></i> Menu</a>
    <ul class="dropdown">
      <li class="active"> [etc.][etc.]