CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Collins Orlando
Collins Orlando

Reputation: 1681

Unable to change nav-pills default background color from blue

I can't for the life of me get rid of nav-pills' default blue background color. Before you ask, I have looked up similar questions, tried the proposed solutions, modified some but nothing seems to work. I'm fairly new to HTML/CSS and this is probably going to be some silly question, but what the hell. Since I'm working with a grey background navigation bar, I'd like the tabs to have a color that'd complement it.

Here's the code:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="Random.css" />
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>
  <nav>
    <ul class="nav nav-pills">
      <li><a href="#" target="_blank">C.O. Dev.</a>
      </li>
      <li class="pull-right"><a href="#">Contact</a>
      </li>
      <li class="pull-right"><a href="#">My Work</a>
      </li>
      <li class="pull-right"><a href="#">About</a>
      </li>
      <li class="pull-right active"><a href="#">Home</a>
      </li>
    </ul>
  </nav>
</body>

</html>

Upvotes: 0

Views: 935

Answers (1)

Ron.Basco
Ron.Basco

Reputation: 2446

you must override it with your custom css. nav.less ruled the style of active nav. create your own css and use this: 

.nav-pills>li.active>a{
 color: #337ab7 !important;
 background-color: #eee !important;
}


.nav-pills>li.active>a{
 color: #337ab7 !important;
 background-color: #eee !important;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="Random.css" />
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>
  <nav>
    <ul class="nav nav-pills">
      <li><a href="#" target="_blank">C.O. Dev.</a>
      </li>
      <li class="pull-right"><a href="#">Contact</a>
      </li>
      <li class="pull-right"><a href="#">My Work</a>
      </li>
      <li class="pull-right"><a href="#">About</a>
      </li>
      <li class="pull-right active"><a href="#">Home</a>
      </li>
    </ul>
  </nav>
</body>

</html>

Upvotes: 1

Related Questions