Foundation5 -更改顶部断点

Question

我试图改变顶梁的断点，并在某种程度上取得了成功。用视觉的方式。但是，在你切换的部分，它将无法工作，直到你进入小的视图大小。

我已经改变了这些设置。为了设置新的断点，还有什么需要更改的吗？JS？塞斯？

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

如果我查看生成的HTML中的topbar的元数据。我发现这个标签：

<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文件编辑顶部栏设置。不应直接编辑任何基金会组件。

如果您只更改了$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)})";