Foundation 中的顶部栏是否可以折叠为 Menu 和三行。我们并不真正需要此功能，但不确定如何禁用折叠。
这需要修改foundation.topbar.js吗？
【问题讨论】：
标签： menu zurb-foundation collapse
如果您通过 sass 使用 Foundation，还有更好的方法。 只需打开 _settings.scss 文件并找到这一行：
// $topbar-breakpoint: emCalc(940px); // Change to 9999px for always mobile layout
取消注释并将值更改为 0，或您想使用的任何断点。
【讨论】：
基础 5.1.1 中的情况发生了变化，这在 css 中对我有用：改变
@media only screen and (min-width: 40.063em) {
.top-bar {
到
@media only screen and (min-width: 4.063em) {
.top-bar {
【讨论】：
是的，在不修改任何 js 文件的情况下，可以使用菜单切换图标不显示小屏幕的默认导航菜单。 Foundation 4 使用一系列visibility classes 与media queries 一起在屏幕上显示和隐藏元素。
以下是上面链接的 Zurb 演示站点的主导航示例：
<nav class="top-bar hide-for-small" style="">
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1><a href="/">Foundation</a></h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="divider"></li>
<li class=""><a href="/grid.php">Features</a></li>
<li class="divider"></li>
<li class=""><a href="/templates.php">Add-ons</a></li>
<li class="divider"></li>
<li class=""><a href="/case-jacquelinewest.php">Case Studies</a></li>
<li class="divider"></li>
<li class=""><a href="/docs/">Docs</a></li>
<li class="divider"></li>
<li class=""><a href="/training.php">Training</a></li>
<li class="divider"></li>
<li class="has-form">
<a href="http://foundation.zurb.com/docs" class="button">Getting Started</a>
</li>
</ul>
</section></nav>
如您所见，删除.menu-icon 类甚至li 很简单；如果您查看 docs.css 的第 2816 行，您会看到为 .top-bar 类设置了最小屏幕断点 (58.75em)：
@media only screen and (min-width: 58.75em) {
.top-bar {
background: #111111;
*zoom: 1;
overflow: visible; }
.top-bar:before, .top-bar:after {
content: " ";
display: table; }
.top-bar:after {
clear: both; }
.top-bar .toggle-topbar {
display: none; }
.top-bar .title-area {
float: left; }
.top-bar .name h1 a {
width: auto; }
...
由于默认情况下 F4 采用移动优先设计方法构建，因此菜单设置为小屏幕。在最小宽度为 58.75 em 时，断点设置为修改默认的 .top-bar 视图以用于更大的屏幕，以便菜单 ul 内联显示，子 li 向左浮动。
您可以通过覆盖 css/scss 的相应行甚至全局变量来覆盖 .top-bar，使其成为默认视图。
【讨论】：
抱歉，这太糟糕了。如何让代码正确显示？
如果您直接使用 Foundation CSS，您可以通过将以下 CSS 行中的断点更改为 0em 来覆盖 .top-bar 菜单的移动模式：
.top-bar-js-breakpoint {
width: 58.75em !important;
visibility: hidden; }
.js-generated {
display: block; }
@media only screen and (min-width: 58.75em) {
----- numerous lines below -------
但是，如果您在 WordPress 或其他 CMS 中使用子主题，则必须复制实际媒体查询下方的所有 .top-bar 相关选择器并将它们粘贴到您的子 CSS 中，然后更改断点到 0。就像一个魅力。
【讨论】：