How to Create a Responsive Navigation Bar with Icons using Font Awesome
Icons and Menus
How To, for Web Applications
By: Chrysanthus Date Published: 21 Feb 2025
This tutorial explains how to create a responsive Navbar with icons. The Navbar is responsive in the sense that, the bar will be horizontal, from the left end of the screen to the right end of the screen; but if the screen width is less than 500px, then the bar will be a vertical bar with a maximum height (it will not necessarily fill the height of the screen). A Navigation bar is a bar with hyperlinks.
At the end of this tutorial, is the complete web page code; it is small. The reader can copy and save it; then open it in a browser, to see what the icon bar looks like.
The font-awesome-4.7.0 stylesheet free library will be used. It has many icons (free). For this tutorial, the icons are HTML i elements that some CSS rules in the library convert into icons. The name of a particular icon is the value of the class attribute in the start tag of the corresponding i element (see below). There is no content for each i element (that is, there is nothing between the start tag and the end tag of each i element).
For the Home Page icon, the i element is:
<i class="fa fa-fw fa-home"></i>
There are three CSS class-name rules here, which are "fa", "fa-fw", and "fa-home". All these class rules are already defined in the font-awesome-4.7.0 stylesheet library, which has to be imported into the webpage(see below). These CSS rules convert the i element into the appropriate icon. For the search icon, the i element is:
<i class="fa fa-fw fa-search"></i>
For the contact icon, the i element is:
<i class="fa fa-fw fa-envelope"></i>
For the login icon, the i element is:
<i class="fa fa-fw fa-user"></i>
Those 4 icons are all the icons for the navigation bar, for this tutorial.
This is a navigation bar, so each icon (i element) has to be within an anchor (a) element. The short language (English) description for the nature of the icon (purpose of the hyperlink) is the content of the 'a' element (between the a start tag and a end tag).
All the anchor elements are in one div container element. In fact the div element is the bar. The HTML code for the bar is:
<div class="navbar">
<a class="active" href="#"><i class="fa fa-fw fa-home"></i> Home</a>
<a href="#"><i class="fa fa-fw fa-search"></i> Search</a>
<a href="#"><i class="fa fa-fw fa-envelope"></i> Contact</a>
<a href="#"><i class="fa fa-fw fa-user"></i> Login</a>
</div>
It is the responsibility of the website design (programmer) to style the div element using the class, class="navbar" . There is not really any need for the website designer (web developer), to style the icons (i elements). The styling for the icons (i elements with the "fa fa-fw fa-. . ." attribute value), is already done in the font-awesome-4.7.0 stylesheet library, which has to be imported into the webpage. Since this is a teaching document, if a link is clicked, nothing should happen: that is why the value of each href attribute is just # .
At the end of this tutorial, the reader should save and test the complete code, and reduce the width of his/her browser slowly and continuously, to see the responsive effect.
The HTML Skeleton Code
The HTML skeleton code to be used for the Navbar in this tutorial is:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
</style>
<script type="text/javascript">
</script>
</head>
<body>
</body>
</html>
The div element will be the only content in the body element (for this tutorial). There will definitely be CSS rules in the style element, and that is the responsibility of the web developer (programmer). There will be some JavaScript in the JavaScript element, to give an anchor element, a particular background color, when its page is the current page (active page).
The link element inside the head element, is what imports the font-awesome-4.7.0 stylesheet free library. Make sure the complete href value is typed. The library is found in the https://cdnjs.cloudflare.com/ website.
The meta element in the head element is necessary for any webpage that has to be responsive. In fact, it should be there, for any modern webpage.
The style Element
Whatever goes into the style element is the responsibility of the website designer. The CSS rule for the div element is:
/* Style the navigation bar */
div.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
Read through the above code, if you have not already done so. The CSS rule for each 'a' element is:
/* Navbar links */
div.navbar a {
text-align: center;
padding: 12px;
color: white;
text-decoration: none;
font-size: 25px;
}
Read through the above code, if you have not already done so. The CSS rule for each 'a' element on mouse hover is:
/* Navbar links on mouse-over */
div.navbar a:hover {
background-color: #000;
}
Read through the above code, if you have not already done so. The CSS rule for the active 'a' element (current page) is:
/* Current/active navbar link */
a.active {
background-color: #04AA6D;
}
Read through the above code, if you have not already done so. The CSS rule to change the bar from horizontal to vertical, and vice-versa, is:
/* Add responsiveness - will automatically display the navbar vertically instead of horizontally on screens less than 500 pixels */
@media screen and (max-width: 500px) {
div.navbar a {
overflow: auto;
display: block;
}
}
Read through the above code, if you have not already done so.
JavaScript
When a hyperlink element (anchor element) is clicked, its background color should change to show that its page has become the current page (or it is active). To achieve this, let each 'a' (anchor) element have an onclick event as follows:
<div class="navbar">
<a class="active" href="#" id='0' onclick="fn(id)"><i class="fa fa-fw fa-home"></i> Home</a>
<a href="#" id='1' onclick="fn(id)"><i class="fa fa-fw fa-search"></i> Search</a>
<a href="#" id='2' onclick="fn(id)"><i class="fa fa-fw fa-envelope"></i> Contact</a>
<a href="#" id='3' onclick="fn(id)"><i class="fa fa-fw fa-user"></i> Login</a>
</div>
In the HTML head element, add the following JavaScript:
<script type="text/javascript">
function fn(id) {
const myCollection = document.getElementsByTagName("a");
for (let i = 0; i < myCollection.length; i++) {
myCollection[i].className = "";
}
myCollection[id].className = "active";
}
</script>
Read through the above code, if you have not already done so.
Note: after clicking an anchor element (hyperlink) when the web page is opened, move the mouse pointer away from the element to see the change of background color. This is because of the hover effect. This scheme works for the link bar in both the horizontal and vertical forms.
Multi-page Websites
Many simple websites today are single page websites, where what would have been separate web-pages, are now sections in one long page, and each section would fill the screen. The above JavaScript code works fine for such a single page website, to give the hyperlink a special background. For a multi-page website, where for example, Home, Search, Contact, and Login are separate web-pages, use JavaScript similar to the following:
<script>
if (window.location.href == 'replace with URL for Webpage 3') {
document.getElementById('3').style.backgroundColor = #04AA6D;
document.getElementById('3').style.color = 'white';
}
</script>
where 3 here is the ID for the anchor element (hyperlink) for webpage 3. Read through the code if you have not already done so. This JavaScript code must be in webpage 3. The anchor element (hyperlink) which has to be clicked, to go to webpage 3, from a different webpage, must have id='3'. Webpage 3 must have the same hyperlink (anchor element), and it too must have id='3' .
Conclusion
And there you have it: the complete code for the Responsive Navigation Bar with Icons, using Font Awesome, is:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
/* Style the navigation bar */
div.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
/* Navbar links */
div.navbar a {
text-align: center;
padding: 12px;
color: white;
text-decoration: none;
font-size: 25px;
}
/* Navbar links on mouse-over */
div.navbar a:hover {
background-color: #000;
}
/* Current/active navbar link */
a.active {
background-color: #04AA6D;
}
/* Add responsiveness - will automatically display the navbar vertically instead of horizontally on screens less than 500 pixels */
@media screen and (max-width: 500px) {
div.navbar a {
overflow: auto;
display: block;
}
}
</style>
<script type="text/javascript">
function fn(id) {
const myCollection = document.getElementsByTagName("a");
for (let i = 0; i < myCollection.length; i++) {
myCollection[i].className = "";
}
myCollection[id].className = "active";
}
</script>
</head>
<body>
<div class="navbar">
<a class="active" href="#" id='0' onclick="fn(id)"><i class="fa fa-fw fa-home"></i> Home</a>
<a href="#" id='1' onclick="fn(id)"><i class="fa fa-fw fa-search"></i> Search</a>
<a href="#" id='2' onclick="fn(id)"><i class="fa fa-fw fa-envelope"></i> Contact</a>
<a href="#" id='3' onclick="fn(id)"><i class="fa fa-fw fa-user"></i> Login</a>
</div>
</body>
</html>
Save this file with a filename and the extension, .html; and then open the file in a browser. Click each link and remove the mouse pointer, to see the active effect. Next, reduce the width of the webpage by dragging the left edge leftwards, and notice that the horizontal navigation bar will become a vertical bar (you may have to click the maximize button first).
Chrys