Clever Geek Handbook

Changing the color of links in my bootstrap navigator

I have this code for my navigator:

 <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 color of the links, 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 to add! important, but I can't do it.

+3


source to share


3 answers


You need to make your css more specific, the bootstrap applied color is on a

. So the top rule would 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 ensures that this color is only applied to an anchor that is a direct child of li, which is a direct child .navbar-nav

. To apply globally (all hyperlinks on your webpage) you can also override by doing a{color:black}

. You also need to make sure you load your css after bootstrap for this to take precedence over loading. Avoid using !important

, it will destroy any cascading css and prevent subsequent redefinition.

0


source 


<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 specified a in that with CSS

0


source


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; 
}
0


source






More articles:


All Articles