foundation 5 navigation bar title color change - zurb-foundation

Question

I'm trying to change the default color for my title, which is white at the moment.
<nav class = "top-bar" data-topbar>
<ul class = "title-area">
<li class = "name">
<h1><%= link_to "CF logo", root_path, class: "home"%></h1>
</li>
</ul>
</nav>
I tried calling
.name h1{
color:red;
}
and
.title-area .name h1{
color:red;
}
even
.home{
font-size: 1.5em;
font-color: red;
}
but none of them works. What can I do?

Answer 1

If your title is inside of an anchor tag <a> - you'll want something like this:
.top-bar .name a { color: #9dcf81; }
Inside Chrome, after you inspect your element, look for the plus symbol once you highlight your title with a mouse click. Consider using the !important attribute if the color doesn't stick.
p.s. - Please provide a link with a URL Shortening service (if your concerned about privacy) to your site.

Answer 2

Whether or not a CSS rule is used is dependent on the selectors specificity. See the MDN for details on how specificity for a CSS selector is calculated.
If you want to see which CSS statement is overriding your one (presumably one of the styles specified in the Foundation CSS library that you are using), then I would recommend a tool like firebug or chrome developer tools which allow you to inspect an element and see which rules are being taken into account and which are being overridden by more specific selectors.
You can also use important! inside a selector to override the specificity, however use this with caution. So for example:-
.name h1 {
color:red !important;
}