css - How to I change the color for the navigation bar in Foundation 4? -

here's website - http://foundation.zurb.com/docs/components/top-bar.html

i've tried change every possible bit of css related navbar still haven't found way change it's color.

could point me right path? want change background-color it's original blackish color color.

the problem you've set colours on individual parts of navigation bar override overall colour via. more specific selectors.

follow 3 steps below:

first part of problem:

.top-bar-section li a:not(.button) {    //here first part of problem is. change different color.    color:black; } 

please note part above change color of elements selector (the item 1 drop down menu in page uses this, change colour of drop-down unless give different selector).

second part:

.top-bar-section > ul > .divider, .top-bar-section > ul > [role="separator"] {    //here second part of problem is. change different color.    border-left: solid 1px black;    border-right: solid 1px black; } 

third part:

.top-bar-section .has-form {    //here third part of problem is. change different colour.    background:black; } 

obviously, if want link :hover colour still black, can keep code below is, if not, change whatever colour want when hovered:

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