css - 如何更改 Foundation 4 中导航栏的颜色？

Question

这是我的网站 - http://foundation.zurb.com/docs/components/top-bar.html

我已经尝试更改与导航栏相关的所有可能的 CSS，但我仍然没有找到改变它颜色的方法。

谁能指出我正确的道路？我想把background-color它原来的黑色改成另一种颜色。

Answer 1

问题是您已经在导航栏的各个部分设置了颜色以覆盖整体颜色。更具体的选择器。

请按照以下三个步骤操作：

问题的第一部分：

.top-bar-section li a:not(.button) {
   //Here is where the first part of the problem is. Change this to a different color.
   color:black;
}

请注意，上面的部分将使用该选择器更改所有元素的颜色（item 1您页面中的下拉菜单也使用此选项，因此除非您为其提供不同的选择器，否则它将更改该下拉菜单的颜色）。

第二部分：

.top-bar-section > ul > .divider, .top-bar-section > ul > [role="separator"] {
   //Here is where the second part of the problem is. Change this to a different color.
   border-left: solid 1px black;
   border-right: solid 1px black;
}

第三方：

.top-bar-section .has-form {
   //Here is where the third part of the problem is. Change this to a different colour.
   background:black;
}

显然，如果您希望链接:hover颜色仍然是黑色，则可以将下面的代码保持原样，如果不是，请将其更改为悬停时想要的任何颜色：

.top-bar-section li a:not(.button):hover {
   // Potential fourth part of problem
   background:black;
}

Answer 2

仅通过修改 css 来更改顶部栏的颜色是如此复杂，以至于没有任何意义。

我发现学习 scss 和指南针要容易得多，在我的例子中，将提及的技术集成到 Visual Studio 中，然后，只需修改设置：

$topbar-bg: #111 !default;

至

$topbar-bg: #yourColor !default;

一切都很完美

顺便说一句，您将获得 compass 和 sass 为您未来的所有项目带来的额外好处