Thursday, November 20, 2014

How to change Bootstrap Navbar background color ?

Posted by Sibichan at 8:41 AM Labels:
You can overwrite most of the bootstrap rules inside your own stylesheet, you don't need to touch the bootstrap.css stylesheet at all. This way when the bootstrap is updated you can just update that right away and all of your changes will remain, and also in this manner you can overwrite the boostrap styles to fit your needs of your site.

You can also use TWBSColor to Generate your own Bootstrap navbar

Here are the main colors and their usage :

    #F8F8F8 : navbar background
    #E7E7E7 : navbar border
    #777 : default color
    #333 : hover color (#5E5E5E for .nav-brand)
    #555 : active color
    #D5D5D5 : active background

I used below css to get a blue color navbar

 .navbar-default {
    background-color: #000000;
    border-color:#000000;
}
.navbar-default .navbar-nav > li > a {
    color: #fff;
}
.navbar-default .navbar-brand {
    color: #fff;
}

Following is full source code

<!DOCTYPE html>
<html lang="en">
<head>
<title>Boostrap Navbar</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="boostrap Navbar,boostrap menu,boostrap navigation">
<meta name="description" content="boostrap Navbar">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
.navbar-default {
    background-color: #000099;
    border-color:#000099;
}
.navbar-default .navbar-nav > li > a {
    color: #fff;
}
.navbar-default .navbar-brand {
    color: #fff;
}
</style>
</head>
<body>
    <div class="container">

      <!-- Static navbar -->
      <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <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="#">Site Name</a>
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">Home</a></li>
              <li><a href="#">About Us</a></li>
              <li><a href="#">Services</a></li>
              <li><a href="#">Contact</a></li>
              </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </nav>

    </div> <!-- /container -->
    </body>
</html>

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)