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.]