Search code examples
csshtmlcolorstextcolor

how to change the text color of navigation bar


I want the Data, Graph, Map, Table text color to be blue. Below is my code. I am new to HTML and CSS

   <nav class="navbar navbar-inverse">
  <div class="container-fluid">
 <div>
  <ul class="nav navbar-nav">
    <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Data<span class="caret"></span></a>
      <ul class="dropdown-menu" id="csv">
          <li><a href="#">cartodb_test1</a></li>
          <li><a href="#">test</a></li>
      </ul>
    </li>
    <li><a href="#">Graph</a></li>
    <li><a href="#">Map</a></li>
    <li><a href="#" id="drop">Table</a></li>
  </ul>
</div>

Below is my css part

.nav.navbar-nav li a {
color: blue;

}

My result: enter image description here


Solution

  • As discussed below: Other styles are overridding yours, if you really need to override the color you can use !important.

    .navbar-nav a{
      color: dodgerblue !important;
    }
    .dropdown-menu a{
      color: grey !important;
    }