Here we are solving a basic problem faced by a beginner web developer in bootstrap i.e. designing a navbar.

Objectives and Outcomes

We will examine the navigation support that we can build into a web page using the Navbar in Bootstrap. We will also learn the basic use of icons in web page design using the built-in glyphicons that are part of Bootstrap, the Font Awesome icons, and bootstrap-social icons.

At the end of this exercise, you will be able to:
1) Create a navigation structure for your website using the Navbar
2) Use icons within your website to represent various entities making use of the glyphicons, font-awesome icons, bootstrap-social icons
3) Include additional CSS classes into your project

Create a basic navigation bar

We will now add a simple navigation bar to the web page so that it provides links to the other pages on the website. Start by adding the following code to the body just above the header jumbotron.

<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
        <div class="container">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Courses</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
</nav>





In the above code, we can see the use of the nav element to specify the navigation information for the website. This nav element is styled by the navbar that declares it as a navigation bar, and the navbar-inverse class to specify that the page should use the dark navigation bar. In addition the inner ul is used to specify the items to be put in the navigation bar. This ul is styled with nav and navbar-nav classes to specify that the items should be displayed inline inside the navigation bar. We also use the container class inside the navigation bar. This navigation bar does not use responsive design at the moment.

Creating a responsive navigation bar

We would like the navigation bar elements to collapse for shorter screens, to be replaced by a toggle button so that the items can be toggled on or off when required on smaller screens. This can be achieved by adding the following code to the navigation bar, just below the container div

<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="#">Codeshot</a>
</div>





You will now notice the addition of a link to the left of the Home link with the name of the restaurant. This is the brand name for the website. You can replace this with the logo for the website. This is created by the <a class="navbar-brand"> tag. The other part is the creation of a button with three horizontal lines. For larger screens, this button is hidden. For smaller screens, this button becomes visible. This button will act as the toggle for the navbar items on small screens. At the moment you still see the items being displayed in the navigation bar even for smaller screens. We will fix this in the next step.

To hide the items from the navigation bar for smaller screens, we need to enclose the ul within another navigation bar as follows:

<div id="navbar" class="navbar-collapse collapse">
   <ul class="nav navbar-nav"> ... </ul>
</div>

By doing this, we are specifying that this navbar with the id navbar will be collapsed on smaller screens, but can be toggled on or off when the toggle button is clicked. Note the use of data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" within the button. This specifies that the menu items are collapsed on smaller screens when the toggle button is visible. They can be displayed or hidden by clicking the toggle button.

Note that the navbar scrolls when the web page in the browser is scrolled. If we wish to keep the navigation bar always visible at the top of the page when the page is scrolled, then we should change the navbar-static-top to navbar-fixed-top. Let us do this now. Note that after the change, the navigation bar remains visible at the top of the page even when the page is scrolled.

Adding a Dropdown Menu to the Navigation Bar

The next modification adds a Dropdown menu to the navigation bar. Let us target the "Courses" item in the navigation bar and turn it into a dropdown menu item. When this item is clicked, a dropdown menu will be displayed. To do this, modify the list item for the "Courses" item in the navigation bar by replacing it with the following code:

<li class="dropdown">
	<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
	Courses<span class="caret"></span></a>
	<ul class="dropdown-menu">
		<li><a href="#">html</a></li>
		<li><a href="#">css</a></li>
		<li><a href="#">php</a></li>
		<li><a href="#">bootstrap</a></li>
		<li role="separator" class="divider"></li>
		<li class="dropdown-header">Others</li>
		<li><a href="#">javascript</a></li>
		<li><a href="#">jQuery</a></li>
	</ul>
</li>
In this modification, the "Courses" list item is now replaced with a dropdown-toggle, which when pressed will show the selection menu below the navigation bar. The structure of this code has similarities with the toggle button that we used above for showing and hiding the navbar items for small screens.

Modifications to the CSS styles

We would like to have the navigation bar displayed in darker blue color, instead of black. In addition, we would like the navigation bar to indicate the current page by highlighting the item with a darker background in the navbar. In addition, when we use the fixed navigation bar, we should give the body of the page an upper margin of 50px, so that the top 50px of the page does not get hidden under the navigation bar. We accomplish these by adding these CSS customisations to the custom css file.

body{
	align:center;
	padding:50px 0px 0px 0px;
	z-index:0;
}

.navbar-inverse{
	background:#585858;
}

.navbar-inverse .navbar-nav  > .active  > a,
.navbar-inverse .navbar-nav  > .active  > a:hover,
.navbar-inverse .navbar-nav  > .active  > a:focus{
	color:#fff;
	background:#000;
}

.navbar-inverse .navbar-nav  > .open  > a,
.navbar-inverse .navbar-nav  > .open  > a:hover,
.navbar-inverse .navbar-nav  > .open  > a:focus{
	color:#fff;
	background:#000;
}

.navbar-inverse .navbar-nav  .open  .dropdown-menu > li > a,
.navbar-inverse .navbar-nav  .open  .dropdown-menu{
	background-color:#585858;
	color:#eeeeee;
}

.navbar-inverse .navbar-nav  .open  .dropdown-menu  > li  > a:hover{
	color:#000000;
}

We are already beginning to see the page format close to the final format for this module.

Using Icon Fonts and Other CSS classes

The last part is to make use of the glyphicons that are provided as part of Bootstrap. In addition we will also use two additional popular font icons.

One of the most popular iconic font toolkit is Font Awesome. Go to its website https://fortawesome.github.io/Font-Awesome/ and download the zip file and unzip it. You will find the font-awesome-4.4.0 folder being created.

The modified version of the bootstrap-social is available on the http://lipis.github.io/bootstrap-social/. We added in support for G+ and YouTube buttons.

We now need to include the css files for font awesome and bootstrap-social in the index.html file. Add the following code to the head of the file after the links for importing Bootstrap CSS classes:

<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/bootstrap-social.css" rel="stylesheet">

Let us now use some font icons in our web page and decorate it. First use the glyphicons that is part of Bootstrap to add a home icon to the Home link on the navigation bar. Update the home list item as follows:

<li class="active"><a href="#"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home</a></li>


Conclusion

We have learnt how to add navigation support into a web page using the navigation bar. We also learnt about using other CSS class and other icon fonts in a web project.