foundation5菜單總是響應

我在我的wordpress主題中使用foundation5作爲respons。如何在foundation5中定義菜單，即使在較大的分辨率下也能看到響應。目前它已經崩潰，直到73.2142857143em。我希望菜單總是摺疊，即使寬度爲2000em。foundation5菜單總是響應

這裏我的html。

<section id="navBar"> 
<div class="contain-to-grid clearfix sticky"> 
    <nav class="top-bar" data-topbar role="navigation" data-options="sticky_on: large;"> 
     <ul class="title-area"> 
      <li class="name">logo</li> 
      <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li> 
     </ul> 
     <section class="top-bar-section"> 
      <ul id="menu-top-menu" class="top-bar-menu left"><li id="menu-item-567" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item active menu-item-567 active"><a href="http://url.loc/coming-soon/">Search</a></li> 
       <li id="menu-item-570" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-570"><a href="http://url.loc/kategorie/">Category</a></li> 
       <li id="menu-item-584" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-584"><a href="http://url.loc/faq/">Faq</a></li> 
      </ul>      </section> 
    </nav> 
</div>

預先感謝您的幫助。

來源

2016-07-27 harry

如果您添加了css，幫助會更容易，但您只需將媒體查詢值更改爲希望菜單響應的寬度，或者將現有菜單css替換爲css在媒體查詢中，所以它總是會有反應

來源

2016-07-27 22:07:20 Connor

該CSS是一個未經修改的基金會css（我沒有把它包括爲它太大，它不會很聰明）。無論如何，你提到的兩件事我都試過了，但是CSS解決方案沒有起作用，它只是適應了我的觀點。這意味着通過添加媒體（gui）菜單圖標是可見的大分辨率，因爲我想但是probem是不可點擊的。該元素上的Javascript不起作用（不會觸發打開的菜單操作）。所以我得出的結論是它必須以不同的方式完成，而不是通過修改css @media。 – harry

所以行爲比... ...我總是看到菜單圖標，但它只在我低於73.2142857143em :)時打開，所以我必須縮小窗口才能看到菜單:) – harry

如果有人知道foundation5中的示例菜單總是崩潰，即使對於大分辨率，給我一個鏈接，我會自己檢查它...不幸的是，我沒有找到任何這種類型和框架版本的例子，謝謝 – harry

在Foundation 5.5.3中，可以通過更新foundation.css來更改topbar斷點寬度。在下面的兩個地方，我改變了斷點9999px（或任何你想要的）：

更改媒體查詢的寬度：

@media only screen and (min-width: 9999px) { 
    .top-bar { 
    ...blah.blah.blah

而這種風格

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

那應該可以工作，但如果沒有，請告訴我們你正在使用什麼版本的Foundation 5（在wordpress主題中）。

來源

2016-08-10 22:34:08 asonnenshine

引用此線程：[使用Topbar斷點改變CSS]（http://foundation.zurb.com/forum/posts/1053-changing-topbar-breakpoint-using-css） – asonnenshine

foundation5菜單總是響應

回答

相關問題