Question

我在响应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>

Answer 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;

Foundation 5响应式菜单断点

1 个答案: