I currently have this piece of html which represents the relevant part of my navbar:
<nav class="navbar navbar-inverse" role="navigation"> <div class="container"> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-user"></span> About</a></li> <li><a href="#"><span class="glyphicon glyphicon-earphone"></span> Contact</a></li> <li><a href="#"><span class="glyphicon glyphicon-briefcase"></span> Portfolio</a></li> <li><a href="#"><span class="glyphicon glyphicon-list-alt"></span> Résumé</a></li> </ul> </div> </nav>
And I have this piece of css which I was hoping to use to change the text color of the navbar:
.nav.navbar-nav.navbar-right { color: blue; }
The only problem is that the text color remains unchanged. I also saw that a very similar question went unsolved. I bet whoever can solve this one can solve the other too.
Make it the following:
.nav.navbar-nav.navbar-right li a { color: blue; }
The above will target the specific links, which is what you want, versus styling the entire list blue, which is what you were initially doing. Here is a JsFiddle.
The other way would be creating another class and implementing it like so:
HTML
<li><a href="#" class="color-me"><span class="glyphicon glyphicon-list-alt"></span> Résumé</a></li>
CSS
.color-me{ color:blue; }
Also demonstrated in this JsFiddle
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With