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

一切完美作品

順便說一句，您將獲得指南針和sass帶​​給您所有未來項目的附加獎勵