Foundation Zurb导航

Question

我使用的是foundation ZURB3，如果浏览器是全屏的，我有一个top navigation，导航看起来很好，但当我压缩它时，我只有一个黑条。也许有些人有这样的问题？

Answer 1

自从我对Foundation进行修补已经有一段时间了，但我在尝试更改css文件中的屏幕宽度设置时遇到了类似的问题-我相信有多个设置必须是相同的，才能使顶栏正常工作。

要使其正常工作，您必须：

• 从他们的网站下载基础类库的最新副本，使用他们的自定义工具设置屏幕宽度(此后不要更改)，或者
• 使用SASS版本，并在SCSS文件中更改屏幕宽度变量(我实际上没有这样做，所以不能提供更多细节)。

编辑:刚刚查看了您的代码片段-您可能需要包含断点，使用toggle-topbar列表项类，例如

<li class="toggle-topbar"><a href="#"></a></li>

Answer 2

如果不看示例(链接不起作用)就很难判断发生了什么，但最好的开始往往是将某人的工作代码复制到您的文件中，并查看它是否正常运行。以此为基准，您可以将其与您的代码进行比较，以查看差异所在。

Answer 3

如果将切换顶栏的宽度从50%更改为100%：

.top-bar ul > li.toggle-topbar {
    cursor: pointer;
    display: block;
    height: 45px;
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
}

至

width: 100%;

这个网站演示了这项技术：

http://catch-ps.com/