Search code examples
htmlcsstwitter-bootstrapcolors

Change navbar text color Bootstrap

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&eacute;sum&eacute;</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.

Solution

  • 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&eacute;sum&eacute;</a></li>

    CSS

    .color-me{
    color:blue;
}

    Also demonstrated in this JsFiddle