Kann die Farbe der Schrift in der Navigationsleiste nicht ändern (ich benutze Bootstrap)

Question

Ich kann nicht verstehen, warum die Standardfarbe von "a" -Elementen im Navigationsmenü nicht geändert wird. Ich möchte sie auf diese spezielle Farbe "# e5dfdc" einstellen. Was vermisse ich? Ich werde es zu schätzen wissen, wenn Sie sich meinen Code anschauen, insbesondere "navbar-rechts li a" Selektor. Vielen Dank!

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

Sie erhalten die Standardfarbe, da Bootstrap bereits einen Stil für a Elemente unter dem .navbar-default .navbar-nav > li > a Selektor definiert hat.

Sie können dies umgehen, indem Sie die Farbe Eigenschaft zu ändern zu:

color: #efebe9 !important; 

---

Eine andere Lösung könnte Ihre ul eine andere Klasse zu geben, und wählen Sie, dass man statt:

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

---

Sie können natürlich das Standard-Styling vollständig überschreiben, wie Pranjal vorgeschlagen hat:

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

aber dies wird die Farbe aller NavBars ändern (wenn Sie, dass woanders zu haben), also seien Sie vorsichtig mit dieser Lösung, wenn Sie absolut sicher sind, wird es nicht andere NavBars auf Ihrer Website beeinflussen und .

Answer 2

den Code unten in Ihrem CSS-Code hinzufügen:

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

Answer 3

Dies war der Code, der die Farbe gezwungen wurde # 777

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

Durch die Zugabe von

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

Sie können überschreiben die Standard-CSS zu sein. Probieren Sie und verwenden Sie den Inspektor, um zu sehen, welche Stile auf die Elemente angewendet werden. Es wird Ihnen wirklich helfen, Sachen schneller zu debuggen.

Happy Coding!