In the last two articles we saw how we can create simple menus via bootstrap pills and tabs. However, most of the advanced websites now a days contain full-fledged navigation bars. A navigation bar is basically a header that contains navigation menu items. Users can browse different sections of the website via navigation bars. To create navigation bar follow these steps:
Take a look at the following example to see bootstrap navbar in action.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Knowledge Hills</a>
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li class="active"><a href="#">About</a></li>
<li><a href="#">Our Team</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Services</a></li>
</ul>
</div>
</div>
</nav>
</body>
</html>
if you look at the above webpage in browser, you should see a navigation bar with white background menu items in dark grey color. You should also see a brand name i.e. “Knowledge Hills” at the top left. All of this styling comes with bootstrap navigation by default.
You can also create inverted navigation bars to suit the color scheme of your website. An inverted navigation bar has black background and with white text. To create inverted navbars, simply add “navbar-inverse” class instead of navbar-default to the opening “nav” tag. Take a look at the following example.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Knowledge Hills</a>
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li class="active"><a href="#">About</a></li>
<li><a href="#">Our Team</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Services</a></li>
</ul>
</div>
</div>
</nav>
</body>
</html>
Now if you open the above page, you should see a navigation bar with black background and white text.
You can also create a sticky navigation bar which remains fixed at the top no matter how much do you scroll down the screen. To create sticky navigation bar, simply add class “navbar-fixed-top” class to any bootstrap navbar. Take a look at the following example.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.div1{
height: 900px;
width: 100%;
background-color: darksalmon;
}
.div2{
height: 900px;
width: 100%;
background-color: darkturquoise;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Knowledge Hills</a>
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li class="active"><a href="#">About</a></li>
<li><a href="#">Our Team</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Services</a></li>
</ul>
</div>
</div>
</nav>
<div class="div1">
</div>
<div class="div2">
</div>
</body>
</html>
Now if you open the above page in browser and scroll down the screen, you will see that the navigation bar remains fixed at the top of the screen.