javascript - Foundation5 - 更改顶栏断点

Question

我正在尝试更改顶栏断点，并以某种方式取得了成功。视觉方式。但是，除非您进入小 View 尺寸，否则切换它的部分将无法工作。

我更改了这些设置。为了设置新断点，我还需要更改什么吗？ JS？ SASS？

$topbar-breakpoint: #{lower-bound($large-range)} !default;  // Change to 9999px for always mobile layout
$topbar-media-query: $large-up !default;

如果我查看生成的 HTML 中顶栏的元数据。我找到这个标签:

<meta class="foundation-mq-topbar">

其中包含:

meta.foundation-mq-topbar {
  font-family: "/only screen and (min-width:64.063em)/";
  width: 64.063em;
}

Answer 1

首先，确保您使用 _settings.scss 文件而不是 _top-bar.scss 文件编辑顶栏设置。您不应直接编辑任何 Foundation 组件。

如果您只更改 $topbar-breakpoint 值，它应该可以工作。将 $topbar-media-query 保留为其默认值。您还应该删除 !default 标志。

$topbar-breakpoint: #{lower-bound($large-range)}; // Change to 9999px for always mobile layout
$topbar-media-query: "#{$screen} and (min-width:#{lower-bound($topbar-breakpoint)})";