鏈接漢堡圖標顯示與自定義斷點

Question

在我的foundation_and_overrides.scss ，我已將topbar-breakpoint更改為特定的px寬度。 我想在寬度小於斷點時顯示漢堡圖標。

現在，它將刪除菜單並將其留空，直到我點擊$small-range為止。 我不確定在foundation_and_overrides.scss何處進行編輯，以在遇到新斷點時顯示漢堡圖標/菜單。

SCSS

$topbar-breakpoint: 1225px; // Change to 9999px for always mobile layout
$topbar-media-query: "only screen and (min-width: #{$topbar-breakpoint})" !default;

的HTML

<div class="fixed header" style="border-bottom: 1px solid #000;">
  <nav class="top-bar" data-topbar role="navigation">
    <ul class="title-area">
      <li class="name">
        <h1><a href="/"><img src="/assets/logo.png" alt="" id="logo-image"></a></h1>
      </li>

      <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
     </ul>

<section class="top-bar-section">
  <ul class="left">
    <li><a href='/programs'>Programs</li>
    <li><a href='/projects'>Projects</li>
  </ul>
</section>
</nav>
</div>