Foundation5 - 更改topbar断点

时间:2015-07-01 13:02:51

标签: javascript sass zurb-foundation zurb-foundation-5

我正试图改变topbars的破发点并以某种方式取得成功。视觉方式。但是,在你进入小视图大小之前,你切换它的部分将无法工作。

我已经更改了这些设置。为了设置新的断点,我还需要更改一些东西吗? 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;
}

1 个答案:

答案 0 :(得分: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)})";