如何更改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;
}