How To Create a Responsive Top Navigation Menu with CSS and JavaScript Using the Font Awesome Menu Icon or Just a Button
Navigation
How To, for Web Applications
By: Chrysanthus Date Published: 9 Mar 2025
This article explains How to Create a Responsive Top Navigation Menu with CSS and JavaScript Using the Font Awesome Menu Icon or Just a Button. So, there is a horizontal menu bar at the top of the webpage, stretching from the left end of the page to the right end of the page. The menu items with no menu icon present in the menu bar, are floated to the left of the menu bar. The menu is responsive, in the sense that, when the webpage is watched with a screen whose width is less than 600px, only the left most menu item will be on the horizontal bar, while the menu icon will appear on the right of the shrink horizontal bar. If the menu icon is clicked, the rest of the menu items will appear below the first menu item, pushing the HTML body content below downwards. If the menu icon is clicked again, the rest of the menu items disappear. If the webpage is watched in a big wider screen, the menu icon is not shown. The menu icon only appears when watched at a screen whose width is less than 600px.
The menu icon is a small image with three white horizontal bars. When the mouse pointer goes over it, the three white bars become three black bars, and the icon’s background becomes light gray. The menu icon should not be confused with menu items, though the menu icon is a menu item with a special purpose.
At the end of this tutorial is the complete webpage code. The reader should copy the complete code into a text editor. Save the file with any name having the extension, .html . Open the file in a browser. Reduce the width of the browser continuously until the menu icon appears. Click the menu icon to see how the rest of the menu items appear below the first menu item. Click the menu icon again so that the rest of the menu items disappear. That is the meaning of responsiveness in this example. The reader is advised to test the complete code first, before continuing to read this tutorial.
Strategy
The strategy is to have a horizontal navigation (hyperlinks) bar when the width of the screen is greater than 600px and to have a vertical navigation (hyperlinks) bar when the screen is less than 600px. While the screen is less than 600px and the menu icon is not clicked, the rest of the anchor elements should not be displayed. When the menu icon is clicked, the rest of the anchor elements should be displayed. This is achieved technically by swapping CSS rules (see below).
There has to be some coding to ensure that, when the screen is less than or equal to 600px, the icon menu should remain at the top right corner, whether or not the rest of the anchor elements are displayed.
The menu icon itself, is not displayed when the screen is greater than 600px.
Webpage Skeleton Code
The web page skeleton code is:
<!DOCTYPE html>
<html>
<head>
<title>Responsive Top Navigation Bar Example</title>
<link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Description of the Web Page.">
<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 link tag imports (loads) the font-awesome/4.7.0 library from the cloudflare.com website. The library has the menu icon. Remember that the menu icon is a small image consisting of three horizontal white bars at its default configuration. For the example in this tutorial, there is the "fa" and "fa-bars" CSS rules in font-awesome/4.7.0 library that "twist" an HTML i element into the menu icon. The i element is the content of an anchor (a) element. An HTML anchor element is the same as an HTML hyperlink element. It is assumed that the reader knows the use of the rest of the other HTML elements in the HTML head element.
The HTML Body Content
<div class="topnav" id="myTopnav">
<a href="#home" class="active" id="0" onclick="fn(id)">Home</a>
<a href="#news" id="1" onclick="fn(id)">News</a>
<a href="#contact" id="2" onclick="fn(id)">Contact</a>
<a href="#about" id="3" onclick="fn(id)">About</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()"> <i class="fa fa-bars"></i></a>
</div>
<div style="padding-left:16px">
<h2>Responsive Topnav Example</h2>
<p>Resize the browser window to see how it works.</p>
</div>
There are two div elements. The one for the navigation menu is the one with the class-name, class="topnav" and ID="myTopnav" . The content of this div element is all the anchor elements for the navigation menu bar, whether it is horizontal or vertical. The last anchor element is the menu icon; it has the class (class-name), "icon" . The actual icon is of the i element. Note its class-name, class="fa fa-bars", which converts the i element into the menu icon. The expression, href="javascript:void(0);", specifies that no new webpage or new long webpage section should appear, when the last anchor element is clicked.
The Styles for the Responsive Top Navigation Menu
The CSS rules in the HTML style element in the HTML head element are in two groups. The first group is for screens greater than 600px. The second group is for screens less than or equal to 600px. This second group also takes care of the clicking of the menu icon. When the menu icon is clicked, the rest of the menu items appear below the first menu item. When the menu icon is clicked again, the rest of the menu items disappear. Remember that the menu icon only appears when the screen is less than or equal to 600px. And there must be some coding to ensure that the menu icon remains at the top-right corner of the small screen, whether or not the rest of the menu items are displayed.
Do not confuse between the menu icon and a menu item. The menu icon is a small image with three horizontal bars, brought in by the font-awesome/4.7.0 free library, while menu items are anchor elements whose contents are texts, without any i element menu icon.
Screens with Width greater than 600px
CSS Rule for the Body Element
The CSS rule for the body element is:
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
The margin all round the body element is 0px. This is good for this particular webpage design. Under this condition, the top navigation bar will align with the top edge and left edge of the body element (no space).
CSS Rule for the Top Navigation Bar div Element
The CSS rule for the bar div element is:
div.topnav {
overflow: hidden;
background-color: #333;
}
"overflow: hidden;" means that there should not be many anchor elements in the div bar. If there are many anchor elements, the extra ones on the right will be clipped off (will not be displayed). The background color of the div element is #333, which is black, but not the blackest black. There is not much styling for the bar div. A lot of styling goes to the anchor elements.
CSS Rule for Each Anchor Element
The anchor element is the hyperlink element. The CSS rule for each of the anchor elements is:
div.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
The selector is "div.topnav a" . So any 'a' element that is in any div element that has the class-name, "topnav", has the declaration styles in this style rule. The style rule is the whole code segment, beginning from the selector to the closing curly bracket.
The anchor element is rectangular and inline by default. "inline" means that the next element should appear on its right. All the anchor elements, except for the icon, are floated to the left. Each has a text color of #f2f2f2 (whitish). Within its rectangle, the text is align at the center. Between the text and border of each 'a' element, is padding space. The top and bottom padding is 14px; and the right and left padding is 16px. The text-decoration is none, meaning that, when the mouse pointer is above the text, even though it is a hyperlink, there should be no underlining of the text. The font-size of the hyperlink text is 17px, big enough.
Anchor Element Rectangle On-hover
The on-hover CSS rule is:
div.topnav a:hover {
background-color: #ddd;
color: black;
}
When the mouse pointer enters a hyperlink rectangle, its background color becomes #ddd (grayish), and its text color becomes black (for contrast). Remember that the icon is like a character. The line color is the character color. The background color of the character is the background color of the anchor element.
CSS Rule for the First Active Anchor Element
The Home section (or home page) for the website is displayed first, when the website is opened, everything being equal. And so the Home anchor element is active. It is given a #04AA6D background color (greenish); and the color of text becomes white, for contrast. The CSS rule for this is:
div.topnav a.active {
background-color: #04AA6D;
color: white;
}
JavaScript has to be used to give the other anchor elements, an active presentation, when it is clicked.
The Menu Icon
Note from the section of The HTML Body Content above, that the menu icon is the last anchor element in the bar. When the div navigation bar is horizontal, the icon anchor element is floated to the left, along side the other (preceding) anchor elements, but it is not displayed (not shown). The specific CSS rule for it not being displayed is:
div.topnav .icon {
display: none;
}
Screens with Width less than or equal to 600px
For screens with width less than or equal to 600px, there is a media-screen query that prevents the anchor elements except the first, from being displayed (shown). This media-screen query also displays the menu icon anchor element and then floats it to the right, while the first remains floated to the left. At this point the div navigation bar is still horizontal, but shorter. The code for that media-screen query is:
@media screen and (max-width: 600px) {
div.topnav a:not(:first-child) {display: none;}
div.topnav a.icon {
float: right;
display: inline;
}
}
There are two CSS rules for this media query. The first one allows only the first menu item (anchor element) to be displayed (shown). The second CSS rule floats the anchor element for the menu icon to the right end of the still horizontal div element, and displays (shows) it ("display: inline;").
There is another media-screen query. This one is responsible for turning the div horizontal navigation bar into a vertical div navigation bar, when the menu icon is clicked; and then turning the vertical bar into the short horizontal bar when the menu icon is clicked again. So the rest of the anchor elements are not really made to appear below the first anchor element, and then made to disappear.
This second media-screen query changes the short horizontal div bar into a vertical bar by making each of the anchor elements, including the first, a block-level element, annulling their float-left property, and then displaying them. Block-level elements place themselves vertically (one below the other) in their container element. That means conversion into a vertical bar.
Note from the section of The HTML Body Content above, that the menu icon is the content of the last anchor element. When the short div horizontal bar is just converted into a vertical bar, the menu icon anchor element will appear at the bottom of the vertical bar. In order to circumvent this, two CSS rules in the second media-screen query are used to send the menu icon anchor element, back to the top-right corner of the now, "vertical" container div element. The second media query is:
@media screen and (max-width: 600px) {
div.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
div.topnav.responsive {
position: relative;
}
div.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
}
The first CSS rule here, turns the float-left property to float-none, effectively annulling float property. If this is not done, when the menu icon is clicked the first time, the rest of the menu items will not appear below the first menu item; they will appear on the right of the first menu item. The first CSS rule here also makes each anchor element a block level element; this must be done.
The second and third CSS rules here, send the menu icon to the top-right corner of the containing navigation div element. The menu icon is sent to the top-right corner of its containing navigation div element by giving it the "position: absolute;" property, in the third CSS rule. In order for the icon anchor element to be given the "position: absolute;" property, its parent element, the div element, has to be given the "position: relative;" property, which is achieved by the second CSS rule here. The menu icon anchor element is kept floated to the right, by the first media-screen query.
When the screen device width is equal to or below 600px, the two media-screen queries modify the "topnav" properties of the navigation div element. The second media-screen query does its own modification by giving the particular div element, a class called, responsive, and putting its own modification properties in the responsive class declaration set. There are three CSS rules for this. Notice how the responsive class is added to the "div.topnav" selector in the three CSS rules in the second media-screen query.
Do not confuse between a media query and a CSS rule: A media (screen) query can have more than one CSS rule.
JavaScript
The JavaScript for this project has two code segments. The first one is:
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
When the menu icon is clicked the first time, the myFunction() function adds the responsive CSS rules with its overriding modifications to the "topnav" CSS rule of the containing div element. When the menu icon is clicked again, only the "topnav" CSS rule becomes applicable to the containing div element. Note the use of the "===" which is different from "==", to determine whether the className is only "topnav" or it is the composite "topnav responsive"
When the website is opened for the first time, the Home section is the current or active section, and this is indicated by the greenish (#04AA6D) background color of the Home anchor element and its white text color, everything being equal. What happens to the background and foreground color of the other anchor elements, when they are clicked? When each is clicked, its section of the website (long webpage) comes up to fill the screen. The background color of the corresponding anchor element has to become #04AA6D and the text color has to become white, producing an active presentation, while the rest of the anchor elements, including the previous active anchor element, have to be at the original background and text color. The following JavaScript code in the HTML head element carries out this function:
function fn(id) {
const myCollection = document.getElementsByTagName("a");
for (let i = 0; i < myCollection.length; i++) {
myCollection[i].className = "";
}
myCollection[id].className = "active";
}
Each HTML anchor element has the onclick event, and sends its ID to the fn() function within the script tags in the HTML head element. The function performs two operations. The first operation is to put all the anchor elements in the "inactive" state, by giving all their class-names the value "" (no character). The next operation puts the anchor element that was clicked in the "active" state, by giving the value, "active" to the class-name of that element. The CSS rule ("div.topnav a.active") above, gives the clicked anchor element, the active presentation. Remember, className in DOM JavaScript, is the equivalent of class, among the attributes of any HTML element. Do not confuse between giving an anchor element the active presentation, and actually bringing up the website (long page) section to fill the device screen: It is the responsibility of the href attribute of the anchor element to bring up the section to fill the screen, and it is the responsibility of the JavaScript code above, to give the anchor element an active presentation.
Multi-page Websites
Many simple websites today are single long page websites, where what would have been separate web-pages, are now short sections in one long page, and each section would fill the screen (when called). The above JavaScript code works fine for such a single long page website, to give the hyperlink a special background and text color. For a multi-page website, where for example, Home, News, Contact and About are separate web-pages, use JavaScript similar to the following to give the "active" icon, the active presentation:
<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. Webpage 3 must have id='3' in the corresponding anchor element in webpage 3, in order to display the anchor element in active presentation (active state).
The Complete Webpage Code
And there you have it: the complete webpage code for the Responsive Top Navigation Menu with CSS and JavaScript Using the Font Awesome Menu Icon, is:
<!DOCTYPE html>
<html>
<head>
<title>Responsive Top Navigation Bar Example</title>
<link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Description of the Web Page.">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
/* Group 1 CSS Rules for wide screens */
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
div.topnav {
overflow: hidden;
background-color: #333;
}
div.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
div.topnav a:hover {
background-color: #ddd;
color: black;
}
div.topnav a.active {
background-color: #04AA6D;
color: white;
}
div.topnav .icon {
display: none;
}
/* Group 2 CSS Rules for screens less than or equal to 600px */
@media screen and (max-width: 600px) {
div.topnav a:not(:first-child) {display: none;}
div.topnav a.icon {
float: right;
display: inline;
}
}
@media screen and (max-width: 600px) {
div.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
div.topnav.responsive {
position: relative;
}
div.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
}
</style>
<script type="text/javascript">
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
function fn(id) {
const myCollection = document.getElementsByTagName("a");
for (let i = 0; i < myCollection.length; i++) {
if (myCollection[i].className != "icon") {
myCollection[i].className = "";
}
}
myCollection[id].className = "active";
}
</script>
</head>
<body>
<div class="topnav" id="myTopnav">
<a href="#home" class="active" id="0" onclick="fn(id)">Home</a>
<a href="#news" id="1" onclick="fn(id)">News</a>
<a href="#contact" id="2" onclick="fn(id)">Contact</a>
<a href="#about" id="3" onclick="fn(id)">About</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()"> <i class="fa fa-bars"></i></a>
</div>
<div style="padding-left:16px">
<h2>Responsive Topnav Example</h2>
<p>Resize the browser window to see how it works.</p>
</div>
</body>
</html>
The reader should copy the complete code into a text editor. Save the file with any name having the extension, .html . Open the file in a browser. Reduce the width of the browser continuously until the menu icon appears. Click the menu icon to see how the rest of the menu items appear below the first menu item. Click the menu icon again so that the rest of the menu items disappear. That is the meaning of responsiveness in this example.
Using Just a Button Instead of the Icon
A particular character can be used instead of the icon from the free font-awesome/4.7.0 library. This character is loosely called a button. The character has the same design as the icon. The actual HTML button is not used. The number code for this character is ☰ .
With that, in the HTML body element above, replace the last anchor element tag,
<a href="javascript:void(0);" class="icon" onclick="myFunction()"> <i class="fa fa-bars"></i></a>
with
<a href="javascript:void(0);" class="icon" onclick="myFunction()"> ☰</a>
Since the font-awesome/4.7.0 library is no longer needed, in the HTML head element above, delete the tag,
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
With those modifications, the complete code will still operate as before.
Thanks for reading.
Chrys
Related Links:
More Related Links:
Cousins
Menus
How to Create a Menu Icon with HTML and CSS and without using a LibraryHow To Create a Top Navigation Bar
How to Create Fixed Auto Height Sidebar Menu with CSS
How to Create a Horizontal Tabs Bar with their Sections using CSS and JavaScript
How to Create a Search Menu to Filter List Items, using CSS and JavaScript
How To Create a Responsive Top Navigation Bar with Left-aligned and Right-aligned Hyperlinks
How to Create a Top Fixed Horizontal Menu with CSS
How to Create a Vertical Navigation Menu for Smartphones and Tablets Using CSS and JavaScript
How to Create a Slide Down Full Screen Curtain Navigation Menu
How To Create a Responsive Collapsible Sidebar Menu
Images
Coming soon . . .Buttons
Coming soon . . .Forms
Coming soon . . .Filters
Coming soon . . .Tables
Coming soon . . .BACK NEXT