Làm cách nào để thay đổi màu cho thanh điều hướng trong Nền tảng 4?

Question

Đây là trang web của tôi - http://foundation.zurb.com/docs/components/top-bar.html

Tôi đã cố thay đổi mọi css có thể có liên quan đến thanh điều hướng nhưng vẫn chưa tìm được cách thay đổi màu của nó.

Mọi người có thể chỉ cho tôi đường dẫn đúng không? Tôi muốn đổi màu background-color từ màu đen ban đầu sang màu khác.

Answer 1

Sự cố là bạn đã đặt màu trên các phần riêng lẻ của thanh điều hướng để ghi đè màu tổng thể qua. bộ chọn cụ thể hơn.

Thực hiện theo ba bước dưới đây:

phần thứ nhất của vấn đề:

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

Xin lưu ý rằng phần trên sẽ thay đổi màu sắc của tất cả các yếu tố với selector đó (item 1 trình đơn thả xuống trong trang của bạn cũng sử dụng nó, vì vậy nó sẽ thay đổi màu sắc của trình đơn thả xuống đó trừ khi bạn cung cấp cho nó một bộ chọn khác).

phần thứ hai:

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

phần thứ ba:

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

Rõ ràng, nếu bạn muốn màu sắc liên kết :hover để vẫn có màu đen, bạn có thể giữ mã dưới đây vì nó là, nếu không, hãy đổi nó thành bất kỳ màu nào bạn muốn khi di chuột:

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

Answer 2

Rất phức tạp để thay đổi màu của thanh trên cùng bằng cách sửa đổi chỉ css mà nó không có ý nghĩa.

Tôi tìm thấy nó dễ dàng hơn để học hỏi SCSS và la bàn và trong trường hợp của tôi tích hợp các công nghệ đề cập vào Visual Studio, sau đó, chỉ cần sửa đổi cài đặt:

$topbar-bg: #111 !default; 

để

$topbar-bg: #yourColor !default; 

và tất cả mọi thứ hoạt động perfectlly

và nhân tiện, bạn nhận được phần thưởng bổ sung mà la bàn và sass mang lại cho tất cả các dự án trong tương lai của bạn