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

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

我试图改变与导航栏相关的每一个可能的css位,但我还没有找到改变它的颜色的方法.

谁能指引我走正确的道路？我想将背景颜色从原来的黑色改为另一种颜色.

解决方法

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

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

问题的第一部分：

.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;
}

请注意,上面的部分将使用该选择器更改所有元素的颜色(页面中的项目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;
}

显然,如果你想要链接：悬停颜色仍然是黑色,你可以保持下面的代码,如果没有,将它改为你希望它在悬停时的颜色：

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