Question

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

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

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

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

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

有关如何使用scss更改断点的任何建议吗？

Answer 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>

它应该与开箱即用的未来版本的基础版兼容，并节省您大量的维护时间，您将获得更少的错误。

编辑基础顶部断点，工作但菜单图标消失

1 个答案: