CODEWITHSUNDEEP
zurb-foundation
user3277633
user3277633

Reputation: 1923

foundation 5 navigation bar title color change

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?

Upvotes: 0

Views: 379

Answers (2)

Uncle Iroh
Uncle Iroh

Reputation: 386

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.

Just right click and inspect element

Upvotes: 1

rgvcorley
rgvcorley

Reputation: 2923

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

Upvotes: 0

Related Questions