Changing the color of the links in my bootstrap navbar

Question

I have this code for my navbar:

 <nav class="navbar navbar-fixed-top" id="my-navbar">
   <div class="container">
       <div class="navbar-header">
           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
           </button>
           <a href="" class="navbar-brand"><img style ="max-width:100px; margin-top: -7px;" src="images/firma-Edgar-Ayales.png" alt=""></a>
       </div><!--End navbar-header-->  
       <div class="collapse navbar-collapse navbar-right" id="navbar-collapse">
           <ul class="nav navbar-nav">
               <li><a href="#portfolio">Feedback</a>
               <li><a href="#features">Gallery</a>
               <li><a href="#gallery">Features</a>
               <li><a href="#feedback">Faq</a>
               <li><a href="#contact">ContactUs</a>
           </ul>
       </div>
   </div><!-- End container -->

And I want to change the links color, I tried this in my css:

.navbar {
 background: rgba(0,0,0,0.4);
    font-family: "Raleway";
font-size:10pt;
letter-spacing: 3pt;
color: black; 

}

I also tried adding !important but I can't make it.

Answer 1

<nav class="navbar navbar-fixed-top" id="my-navbar">
   <div class="container">
       <div class="navbar-header">
           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
           </button>
           <a href="" class="navbar-brand"><img style ="max-width:100px; margin-top: -7px;" src="images/firma-Edgar-Ayales.png" alt=""></a>
       </div><!--End navbar-header-->  
       <div class="collapse navbar-collapse navbar-right" id="navbar-collapse">
           <ul class="nav navbar-nav" id="links">
               <li><a href="#portfolio">Feedback</a>
               <li><a href="#features">Gallery</a>
               <li><a href="#gallery">Features</a>
               <li><a href="#feedback">Faq</a>
               <li><a href="#contact">ContactUs</a>
           </ul>
       </div>
   </div><!-- End container -->

CSS:

#links a{
     color:#000000;
     font-size:18px;
}

I just added id="links" to the ul, and then referenced the a's in that with CSS

Answer 2

Here is a possible solution" https://jsfiddle.net/99x50s2s/52/

CSS:

.nav>li>a{
 background: rgba(0,0,0,0.4);
    font-family: "Raleway";
font-size:10pt;
letter-spacing: 3pt;
color: black; 
}

Answer 3

You need to make your css more specific, color applied by bootstrap is on a . So overriding rule will be:

.navbar-nav > li >a{
  color:black;
}

to override the default rule applied by bootstrap on anchor:

a {
  color: #337ab7;
  text-decoration: none;
}

Pen

This makes sure that this color is applied only to the anchor which is direct descendant of li which is direct descendant of .navbar-nav . In order to apply globally (all hyperlinks in your webpage), You could as well override by doing a{color:black} . You also need to make sure you are loading your css after bootstrap so that that takes the precedence over bootstrap. Avoid using !important it will destroy any cascadeability of the css and will prevent any overriding later on.