On previous bootstrap tutorial, we have learned how to change the color of a Bootstap Navigation Bar where we changed default color of Inverted Navigation Bar which has black becomes blue. If you want to learn it, you can find in previous tutorial :
Change the color of navigation bar
Right now, we'll learn about how to replace the navbar brand with your own image by swapping the text for an image. Because navbar-brand has its own size of height and padding, because of that if the image size is too high, it can cause navigation bar into a mess.
Experiment 1
By using existing source code in the previous tutorial : "Tutorial bootstrap about changing the color of navigation bar, we'll add navbar brand with an image as shown by the following script :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="tutorial-boostrap-merubaha-warna">
<meta name="author" content="ilmu-detil.blogspot.com">
<title>Tutorial Boostrap </title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/bootstrap-theme.css" media="screen">
<style type="text/css">
.navbar-inverse {
background-color: #3b5998;
font-size:18px;
}
</style>
</head>
<body>
<div class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
<img src="assets/images/tk_logo5.png" alt="Techro HTML5 template"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="about.html">Programming</a></li>
<li><a href="courses.html">English</a></li>
<li><a href="price.html">Review</a></li>
<li><a href="videos.html">Videos</a></li>
<li><a href="videos.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</div>
<!-- /.navbar -->
</body>
</html>
So, the output will be shown by following figure :
 |
| Figure.1 |
You can see the output above (Figure.1), if height of an image is not balance with navigation bar's heigh then the desired output look less responsive.So how is the way to make an image can adapt the size of navigation bar .Look at the experiment 2 to get the answer.
Experiment 2
Add the following script to make an image of navbar brand can adapt with the size of navigation bar.
.navbar-brand{
float: none !important;
}
The output of css script above will be show by following figure.2 :
 |
| Figure.2 |
You can download source code of the entire tutorial on:
