Cannot change color of font on navigation bar (i'm using bootstrap)

Question

I cannot understand why default color of "a" elements on navigation menu is not changed. I want to set them to this particular color "#e5dfdc". What am i missing? I will appreciate if you look at my code, particularly "navbar-right li a" selector. Thanks!

enter image description here

Project on Codepen

HTML

<nav class="navbar navbar-default">
      <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#"><img id="logo-img" src="http://www.fillfox.com/wp-content/uploads/2014/02/FILL-FOX-LOGO-ONLY3A-1024x1024.png"></a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">About</a></li>
            <li><a href="#">Features</a></li>
            <li><a href="#">Species</a></li>
            <li><a href="#">Buy it now</a></li>

          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
</nav>

<section class="upper-section">

    <div class="container">

      <div class="row">

          <div class="row">

            <div class="col-md-6 col-md-offset-3 col-xs-12" id="upper-sec-words-wrapper">
              <p>“Sweet, Beautiful and Dangerous”</p>
              <p>ADOPT THE MOST GORGEOUS FOXES TO EMBOLISH YOUR SETTING</p>
            </div>

          </row> <!--end of inside row-->

        <div class="col-md-6 col-md-offset-3 col-xs-12 upper-section-central-content">

            <div id="upper-sec-img-wrapper">
              <img class="img-responsive" id="upper-section-img" src="http://pngimg.com/upload/fox_PNG370.png">

            </div>

        </div> <!--end of col-md-6-->

      </div> <!--end of row-->

    </div><!-- /.container-fluid -->

</section>

CSS

@import 'https://fonts.googleapis.com/css?family=Vesper+Libre:400,500,700,900&subset=devanagari,latin-ext';

.navbar {
  background-color:#bcaaa4;
  height:100px;
  margin-bottom: 0 !important;
  border:none;
  /*border-bottom:1px solid black;*/
  border-radius: 0 !important;
  -moz-border-radius: 0 !important;
}

.navbar-right li a {
  font-family: 'Oswald', sans-serif;
  font-size:18px;
  color:#efebe9;
  text-transform:uppercase;
}

a.navbar-brand  {
  /*background-color:red;*/
  padding:0;
  width:100px;
  height:100%;
}

#logo-img {
  padding-top:0;
  width:100px;
}

/*********** UPPER SECTION ************/
.upper-section-central-content {
  /*background-color:red;*/
  margin-top:120px;
  height:auto;
}

#upper-sec-img-wrapper img {
  width:400px;
}

#upper-sec-img-wrapper {
  width:400px;
  margin:0 auto;
}

.upper-section {
  padding-top:0 !important;
  background-color:#bcaaa4;
}

#upper-sec-words-wrapper {
  margin-top:120px;
  text-align:center;
  /*background-color:red;*/
}
#upper-sec-words-wrapper p:first-child{
  font-family:"Roboto";
  font-size:30px;
  font-weight:bold;
  color:#efebe9;
}

#upper-sec-words-wrapper p:nth-child(2){
  font-family:"Raleway";
  font-size:18px;
  font-weight:light;
  color:#efebe9;
}

/***** Make text responsive *****/

@media all and (max-width: 2000px) { 
/* screen size until 1200px */

    navbar-nav li a {
        font-size: 18px; /* 1.5x default size */
    }
}

@media all and (max-width: 1600px) { 
/* screen size until 1200px */

    navbar-nav li a {
        font-size: 18px; /* 1.5x default size */
    }
}

@media all and (max-width: 1200px) { 
/* screen size until 1200px */

    navbar-nav li a {
        font-size: 18px; /* 1.5x default size */
    }
}

@media all and (max-width: 1000px) { /* screen size until 1000px */
    navbar-nav li a {
        font-size: 18px; /* 1.5x default size */
    }
    #upper-sec-words-wrapper {
        margin-top:180px;
  }
    }
@media all and (max-width: 500px) { /* screen size until 500px */
    navbar-nav li a {
        font-size: 18px; /* 1.5x default size */
    }

    #upper-sec-img-wrapper img {
          width:300px;
        }

    #upper-sec-words-wrapper p:first-child{
      font-family:"Roboto";
      font-size:24px;
      font-weight:bold;
      color:#efebe9;
    }

#upper-sec-words-wrapper p:nth-child(2){
      font-family:"Raleway";
      font-size:12px;
      font-weight:light;
      color:#efebe9;
    }
}

Answer 1

This was the code that was forcing the color to be #777

.navbar-default .navbar-nav > li > a {
    color: #777;
}

By adding

.navbar-default .navbar-nav > li > a {
        color: #e5dfdc;
 }

You can overwrite the default CSS. Try and use the inspector to see what styles are being applied to the elements. It'll really help you debug stuff faster.

Happy Coding!

Answer 2

You are getting the default color because bootstrap already has a style defined for a elements under the .navbar-default .navbar-nav > li > a selector.

You could bypass this by changing the color property to:

color: #efebe9 !important;

---

Another solution could be to give your ul another class, and select that one instead:

.narbar-right.my-navbar li a {
  font-family: 'Oswald', sans-serif;
  font-size:18px;
  color:#efebe9;
  text-transform:uppercase;
}

---

You can of course override the default styling completely, as Pranjal suggested, by doing this:

.navbar-default .navbar-nav>li>a{
   color: #e5dfdc;
}

but this will change the color of all navbars (if you have that somewhere else too), so be careful with this solution unless you're absolutely sure it won't affect other navbars on your site as well.

Answer 3

Add the below code in your css code:

.navbar-default .navbar-nav>li>a{
   color: #e5dfdc;
}