sass - Zurb基金会: Topbar menu button on medium

Question

我想在中小屏幕尺寸中显示菜单按钮并折叠顶部栏，而不仅仅是像默认行为那样以小尺寸显示。

我尝试了一些设置:

$topbar-breakpoint: #{upper-bound($large-range)}; // Change to 9999px for always mobile layout

但是好像没用...

Answer 1

在您的_settings.scss中取消注释

// $topbar-breakpoint: #{upper-bound($medium-range)};
// $topbar-media-query: "only screen and (min-width: #{upper-bound($medium-range)})";

$topbar-breakpoint、$topbar-media-query 正在使用 upper-bound 从断点 var 获取高值，这实际上是一个数组 64.xxem 和90em。

现在使用下界而不是上限，如下所示..

$topbar-breakpoint: #{lower-bound($large-range)};
$topbar-media-query: "only screen and (min-width: #{lower-bound($large-range)})"

如果我遗漏了什么，请告诉我!我没有测试这个，因为我从不使用 less 文件，但我认为这就是它的工作原理!