Foundation 5 Top Bar附加断点

Question

我希望某些菜单项不会折叠到顶栏断点处的菜单中，而是在稍后的另一个断点处。

现在在我的80em断点处，每个项目都会折叠到菜单中。 但我希望某些导航项目在30em时崩溃。 我发现有可见性类但它们放在项目的<li>或父<ul>上没有效果。尝试＆＃34;显示为小型＆＃34;没有效果。使用＆＃34; hide-for-medium-up＆＃34; （出于测试目的）该项目被正确隐藏。

提前感谢我指出了正确的方向。

使用解决方案进行编辑：

在研究了框架核心之后，我想出了一个解决方案。

1）在_global.scss中，您可以为其他断点设置其他范围。

// Media Query Ranges
$small-range: (0em, 40em) !default;
$medium-range: (40.063em, 64em) !default;
$large-range: (64.063em, 90em) !default;
$xlarge-range: (90.063em, 120em) !default;
$xxlarge-range: (120.063em, 99999999em) !default;

// The following code is the new one:
// Media Query Ranges for Top Bar
$medium-range-tb: (45.063em, 80em); // 45 to 80 ems in my case, yours will be different
$large-up-range-tb: (80.063em, 99999999em);

2）在同一文件中，您在下面的某些行设置了新的媒体查询：

$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})" !default;
$medium-up-tb: "#{$screen} and (min-width:#{lower-bound($medium-range-tb)})" !default; // This one is new
$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})" !default;

$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})" !default;
$large-up-tb: "#{$screen} and (min-width:#{lower-bound($large-up-range-tb)}) and (max-width:#{upper-bound($large-up-range-tb)})" !default; // This one is new
$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})" !default;

3）在_global.scss中，您需要我们刚设置的新变量：

// Transitions and breakpoint styles
$topbar-transition-speed: 300ms !default;
// Using rem-calc for the below breakpoint causes issues with top bar
$topbar-breakpoint: #{lower-bound($medium-range-tb)} !default; // This one is new/updated
$topbar-media-query: $medium-up-tb !default; // This one is new/updated

4）在同一文件中，您在下面的某些行设置了新的媒体查询：

@media only screen and (min-width:#{lower-bound($medium-range-tb)}) and (max-width:#{upper-bound($medium-range-tb)}) {
    // Put the stuff you want to do here
    // e.g: I placed the hamburger icon mixin here
}

5）编译并开心：）