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

Question

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

I've tried to change every possible bit of css related to the navbar but still I haven't found a way to change it's color.

Could anyone point me to the right path? I want to change the background-color from it's original blackish color to another color.

Answer 1

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

Follow the three steps below:

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 part above will change the color of all elements with that selector (the item 1 drop down menu in your page also uses this, so it will change colour of that drop-down unless you give it a different selector).

Second part:

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

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 link :hover colour to still be black, you can keep the code below as it is, if not, change it to whatever colour you want it to be when hovered:

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

Answer 2

Is so complex to change the color of the top bar by modifying the css only that it makes no sense.

I find it much easier to learn scss and compass and in my case integrate the mention technologies into Visual Studio, then, just modified the setting:

$topbar-bg: #111 !default;

to

$topbar-bg: #yourColor !default;

and everything works perfectlly

and by the way, you get the added bonus that compass and sass bring to all your future projects