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

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>

随后的结果是折叠 浏览器桌面 window 生成菜单图标和活动子项链接。

它在 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

不是预期的答案。和启动的kludge。但我仍然无法查明为什么没有发生切换（而在其他情况下，适当的样式被应用到 small 具有基础 css 的视口。）

基本上用 dropdown 换掉一侧，重新创建菜单。

Soooo...这是一个 rails 应用程序，与 browser gem (condition if browser) and font awesome 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.]

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

Zurb Foundation 5 - Top Bar - Collapses on small browser window but not on mobile

html

javascript

css

zurb-foundation