Foundation 5 响应式菜单断点

【问题标题】：Foundation 5 responsive menu breaking pointFoundation 5 响应式菜单断点
【发布时间】：2019-04-07 18:24:15
【问题描述】：

我在响应式 5 (5.4.7) 中有一个响应式菜单。移动菜单（汉堡图标）显示低于 640 像素，在 640 和 1185 像素之间移动菜单消失，但普通菜单无法正常显示。如何将移动菜单的断点从 640 更改为 1185（或其他名称）。

<nav class="top-bar" data-topbar role="navigation">
     <ul class="title-area">
         <li class="name">
              <h1 data-finder-type="Web App" data-finder-name="Logo" data-finder-id="7616221"><a href="/"><img src="{{ companyInfo['Logo']}}" alt="logo"></a></h1>
         </li>
         <li class="toggle-topbar menu-icon"><a href="#"><span></span></a> 
         </li>
     </ul>
     <section class="top-bar-section">
        <ul>
            {module_menu, version="2", menuId="1405853", moduleTemplateGroup="Default"}
        </ul>
     </section>
</nav>

【问题讨论】：

标签： zurb-foundation zurb-foundation-5

【解决方案1】：

转到您的 _settings.scss 文件，在第 1425 行附近，您将看到变量（默认情况下可能会被注释掉）：

$topbar-media-query: $medium-up;

删除 '//' 使其不再被注释掉，然后将 '$medium-up' 更改为 '$large-up' 或更准确地说是 1185px。所以它看起来像这样：

$topbar-media-query: $large-up;
OR
$topbar-media-query: 1185px;

将变量设置为 '$large-up' 会使移动汉堡菜单从中等视口尺寸向下显示。

我知道您没有要求这样做，但如果您希望移动汉堡菜单始终显示，您可以执行以下操作：

$topbar-media-query: 9999px;

【讨论】：