编辑 Foundation 顶栏断点，工作但菜单图标消失答案

【问题标题】：Edit the Foundation top-bar breakpoint, works but menu icon disappears编辑 Foundation 顶栏断点，工作但菜单图标消失
【发布时间】：2014-05-13 17:22:42
【问题描述】：

我正在为我的网站使用 Zurb Foundation 5，但我需要更改顶栏断点，因为我的菜单项比容器内的菜单项多。

我用谷歌搜索发现我可以用以下内容覆盖此设置（在导入基础之前设置）：

$topbar-breakpoint: 880px; 
$topbar-media-query: "only screen and (min-width: #{$topbar-breakpoint})";

这使得主菜单在 880px 处消失，但在默认断点 40.063em 之前没有菜单图标（汉堡图标）显示（设置为显示：无，见下面的截图）。

https://www.dropbox.com/s/3as00ir47aluh4b/Screenshot%202014-05-12%2014.32.43.png

有什么建议可以使用 scss 更改断点吗？

【问题讨论】：

标签： sass zurb-foundation

【解决方案1】：

更新：

只有当您有充分的理由且没有其他方法时，您才应该修改基础设置。改用这个标记（这是官方的方式）：

<nav class="top-bar show-for-large-up" data-topbar="">
   <!-- menu items for the wide screen -->
</nav>

<nav class="top-bar hide-for-large-up" data-topbar="">
   <!-- menu items for the medium and small screen -->
</nav>

它应该开箱即用地与 Foundation 的未来版本兼容，并为您节省大量维护时间，并且您将发现更少的错误。

【讨论】：

不，看起来不像。这是我的标题部分：http://codepen.io/schikulski/pen/isBIK
@simen Btw Foundation 有很多注释掉的设置，如果同时使用它们可能会发生冲突，尤其是断点。如果不使用每个可能的屏幕检查每个元素，真的很难检测到所有问题。
我明白了。但我认为顶栏的重点是自动生成的移动菜单？在Foundation's website 上，您可以设置菜单折叠到移动菜单中，而无需为移动菜单添加任何附加标记。使用 show-for-large-up 和 hide-for-large-up 需要我渲染两组菜单。我需要的是 Foundation 在默认值之前几个像素折叠到移动菜单中。在这种情况下，其他一切都可以完美地开箱即用。
@simen 检查他们的顶部栏来源。它与我的代码相同，因为我把它带到了那里。我刚刚更改了可见性选项。
是的，我开始想同样的事情，我的 html 是错误的什么的。随意检查my source code here u: stack p: overflow。这让我发疯了。