CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user6417619
user6417619

Reputation:

unable to change navbar's font color

I'm trying to change the navbar's background color to blue and the links color to white. I am not able to change the links on the navbar to white. I'm not doing something right. Not sure what. Appreciate the help!

 .navbar-default  {
	background-color: #2196f3;
	
}
.navbar a{
	color:white;
}
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Home</title>
	<link rel="stylesheet"  href="css/bootstrap/css/bootstrap.min.css">
	
	<link rel="stylesheet" type="text/css" href="css/bootstrap/css/index.css">
</head>
<body>
	<nav class="navbar  navbar-fixed-top navbar-default ">
		<div class="container-fluid">
			<div class="navbar-header">
				
				<a class="navbar-brand" href="#">Home</a>
			</div>
			<ul class="nav navbar-nav navbar-left">
				<li><a href="#">Shop</a></li>
				<li><a href="#">Drive</a></li>
			</ul>
			<ul class="nav navbar-nav navbar-right">
				<li><a href="#">Zipcode</a></li>
				<li><a href="#">Help/FAQ's</a></li>
				<li><a href="#">Conatct us</a></li>
			</ul>
		</div>
	</nav>
<script src = "js/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

Upvotes: 1

Views: 78

Answers (4)

blurfus
blurfus

Reputation: 14031

You need to be more specific about your selectors or other selectors (defined in bootstrap's CSS) will apply as they are likely more specific

This is all better explained in the specificity rules

See sample code below.

nav.navbar-default {
  background-color: #2196f3;
  background-image: none;
}
nav.navbar-default .navbar-brand,
nav.navbar-default .navbar-nav>li>a {
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<nav class="navbar navbar-fixed-top navbar-default ">
  <div class="container-fluid">
    <div class="navbar-header">

      <a class="navbar-brand" href="#">Home</a>
    </div>
    <ul class="nav navbar-nav navbar-left">
      <li><a href="#">Shop</a>
      </li>
      <li><a href="#">Drive</a>
      </li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Zipcode</a>
      </li>
      <li><a href="#">Help/FAQ's</a>
      </li>
      <li><a href="#">Conatct us</a>
      </li>
    </ul>
  </div>
</nav>


</html>

Upvotes: 0

vanburen
vanburen

Reputation: 21663

You need to be more specific with your CSS rules. See Specificity

Working Example:

.navbar.navbar-default {
  background-color: #2196f3;
}
.navbar.navbar-default ul > li > a,
.navbar.navbar-default .navbar-brand {
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-fixed-top navbar-default ">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Home</a>
    </div>
    <div class="collapse navbar-collapse" id="navbar">
      <ul class="nav navbar-nav navbar-left">
        <li><a href="#">Shop</a>
        </li>
        <li><a href="#">Drive</a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Zipcode</a>
        </li>
        <li><a href="#">Help/FAQ's</a>
        </li>
        <li><a href="#">Conatct us</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Upvotes: 1

Richard
Richard

Reputation: 560

Remove the .navbar a rule set and add:

/* change brand text color */
.navbar-default .navbar-brand
{
    color:white;
}

/* change list links text color */
.navbar-default .navbar-nav > li > a
{
    color:white;
}

Upvotes: 0

weigreen
weigreen

Reputation: 1242

Bootstrap have many default style.

You code is not working is because bootstrap override your css(same as @Kirito mention).

You can change css to this, it work:

.navbar div{
    background-color: #2196f3 !important;

}
.navbar a{
    color:white !important;
}

However, better solution is customize your bootstrap. link: http://getbootstrap.com/customize/

This approach will get cleaner code and less problem

Upvotes: 0

Related Questions