How to change the color of the navigation bar in Foundation 4?

Question

Here my site is http://foundation.zurb.com/docs/components/top-bar.html

I tried to change every possible css bit associated with the navigation bar, but still I did not find a way to change its color.

Can someone point me in the right way? I want to change the background-color from its original blackish color to another color.

Answer 1

The problem is that you have adjusted colors on separate parts of the navigation bar to override the overall color through. more specific selectors.

Follow these three steps:

The first part of the problem:

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

Please note that the above part will change the color of all elements with this selector (the item 1 drop-down menu on your page also uses this, so it will change the color of this element down if you don’t give it another selector).

The second part of:

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

The third part:

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

Obviously, if you want the :hover color to be still black, you can save the code below as it is, if not, change it to whatever color you want it to hang:

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

Answer 2

It’s difficult to change the color of the top bar by changing the CSS so that it makes no sense.

It is much easier for me to learn scss and compass, and in my case integrate the mentioning technologies in Visual Studio, and then change the setting:

 $topbar-bg: #111 !default; 

to

 $topbar-bg: #yourColor !default; 

and everything works fine

and by the way, you get an additional bonus that the compass and sass will bring to all your future projects.