foundation5菜单始终响应

Question

我在wordpress主题中使用foundation5作为响应。我如何在foundation5中定义菜单，使其即使在大分辨率下也能响应。目前，它已坍塌至73.2142857143em。我希望菜单总是折叠的，即使宽度为2000em。

这是我的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>

提前感谢您的帮助。

Answer 1

如果添加css会更容易提供帮助，但您所要做的就是将媒体查询值更改为您希望菜单响应的宽度，或者仅用媒体查询中的css替换现有菜单css，使其始终响应

Answer 2

在Foundation5.5.3中，您可以通过更新Foundation.css来更改顶条断点宽度。在以下两个地方，我将断点更改为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主题中）。