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

在 Foundation 5.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 主题中）。