Why won't the color of my navbar links change

Question

So this is the HTML I have right now. I am trying to change specific links in the navbar. The "font-family", "line-height", and "font-size" all work, but the color of the links will not change.

    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a href="#" class="navbar-left"><img src="resources/assets/yf_logo.svg"></a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Home</a></li>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">Programs</a>
              <ul class="dropdown-menu">
                <li><a href="#">Shelter</a></li>
                <li><a href="#">Drop-ins</a></li>
                <li><a href="#">Street Outreach</a></li>
                <li><a href="#">Community Partners</a></li>
                <li><a href="#">FAQ</a></li>
              </ul>
            </li>
            <li class="textstyle16"><a href="#">Get Involved</a></li>
            <li class="textstyle16"><a href="#">About</a></li>
            <li class="textstyle16"><a href="#">Contact</a></li>
            <li class="textstyle18"><a href="#">Donate</a></li>
          </ul>
        </div>
      </div>
    </nav>

Here is my first css

    .textstyle16 {
font-family:"montserrat-regular";
font-size:18px;
line-height:21px;
color:#474747;

here is my second css

    .textstyle18 {
font-family:"montserrat-regular";
font-size:18px;
line-height:21px; 
color:#ffffff;
    }

2

There is no font:#fffff; option – sTx Mar 07 '17 at 18:08

score 2 · Answer 1 · answered Mar 07 '17 at 18:09

2

You need to use color: (not font:).

answered Mar 07 '17 at 18:09

Rounin

27,134
9
83
108

score 1 · Answer 2 · answered Mar 07 '17 at 18:07

It is probably being overwritten elsewhere in your code. Add !important to the color definition. If this correct the color, then yes, it's being overwritten somewhere in your styles.

Right-click the link and "inspect" the link in Google Chrome or Firefox. You'll be able to see which styles are being applied to the link specifically.

Example:

Johannes · Accepted Answer · 2017-03-07T18:32:37.940

1

You need to use .textstyle16 a or .textstyle16 a:link as a selector. The links are child elements of the .textstyle16 elements, they don't have that class themselves, and there is a color declaration for a tags in the browsers default styles which applies if you don't use these selectors.

edited Mar 07 '17 at 18:32

answered Mar 07 '17 at 18:13

Johannes

64,305
18
73
130

Why won't the color of my navbar links change

3 Answers3