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 来更改topbar断点宽度。在以下两个地方，我将断点更改为9999px（或任何你想要的）：

更改媒体查询的宽度：

<a name="table-of-contents"></a>
<h1>Table of Contents</h1>
...
<a href="#table-of-contents">Table of Contents</a>

和这种风格

<h1 id="table-of-contents">Table of Contents</h1>
...
<a href="#table-of-contents">Table of Contents</a>

这应该有用，但如果它没有，请告诉我们你使用的基础5的版本（在wordpress主题中）。

foundation5菜单始终响应

2 个答案: