zurb基础顶部导航栏改变断点

I would like to make the top nav bar in a foundation page collapse into the menu form earlier than it does by default because in lower res desktop screens it semi collapses and is neither in mobile view or full desktop view. I tried modifying the following line:

我想使基础页面中的顶部导航栏比默认情况下更早地折叠到菜单表单中，因为在较低分辨率的桌面屏幕中，它半崩溃并且既不在移动视图中也不在完整桌面视图中。我尝试修改以下行：

    @media only screen and (min-width: 40.063em) {  <---This is the line I changed
      .top-bar {
        background: #333333;
        *zoom: 1;
        overflow: visible; }
   -----many more lines-------------------------

It sort of worked, as the bar collapsed earlier in the re-sizing but the menu stopped working. Any ideas as to how I can accomplish this? Any help will be greatly appreciated, thank you. (I'm using foundation 5 by the way)

它有点奏效，因为酒吧在重新调整尺寸时早些时候倒塌了，但是菜单停止了工作。关于如何实现这一点的任何想法？非常感谢任何帮助，谢谢。（我顺便使用基础5）

1 个解决方案

#1

I know this is an old question but if you haven't found the answer yet, or for anyone else who may be viewing this...

我知道这是一个古老的问题，但如果你还没有找到答案，或者对于其他可能正在查看此问题的人......

It looks like you were off to a good start.

看起来你有一个良好的开端。

Around line 1662

1662年左右

@media only screen and (min-width: 9999px) {
  .top-bar {
    background: #333333;
    *zoom: 1;
    overflow: visible; }

But you actually need to make changes in 2 additional locations.

但实际上您需要在另外两个位置进行更改。

Around line 3714:

第3714行：

meta.foundation-mq-topbar {
  font-family: "/only screen and (min-width:9999px)/";
  width: 9999px; }

Around line 1436:

围绕1436行：

meta.foundation-mq-topbar {
  font-family: "/only screen and (min-width:9999px)/";
  width: 9999px; }

Full answer is here: Changing Topbar breakpoint using css?

完整的答案在这里：使用css更改Topbar断点？

Hope this helps!

希望这可以帮助！

#1