Невозможно изменить цвет шрифта на панели навигации (я использую bootstrap)

Question

Не могу понять, почему по умолчанию цвет элементов «a» в меню навигации не изменяется. Я хочу установить их в этот цвет «# e5dfdc». Что мне не хватает? Я буду признателен, если вы посмотрите на мой код, особенно на «навигатор-правый ли». Благодаря!

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

Вы получаете цвет по умолчанию, потому что bootstrap уже имеет стиль, определенный для a элементов под селектором .navbar-default .navbar-nav > li > a.

Вы можете обойти это путем изменения свойства цвета для:

color: #efebe9 !important; 

---

Другим решением может быть, чтобы дать ваш ul другой класс, и выберите, что один вместо:

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

---

Вы можете, конечно же, переопределить стиль по умолчанию, как предложил Праньял, сделав следующее:

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

, но это изменит цвет всех NavBars (если у вас есть что-то еще тоже), так что будьте осторожны с этим решением, если вы не будете абсолютно уверены, что это не повлияет на другие NavBars на вашем сайте, а также ,

Answer 2

Добавьте приведенный ниже код в код CSS:

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

Answer 3

Это код, который вынуждал цвет, чтобы быть # 777

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

Добавляя

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

Вы можете перезаписать CSS по умолчанию. Попробуйте и используйте инспектор, чтобы узнать, какие стили применяются к элементам. Это действительно поможет вам быстрее отлаживать материал.

Счастливое кодирование!