How To Create a Responsive Horizontal Navigation Bar with Equal Hyperlink Widths
Distributed Hyperlinks within a Horizontal Bar
How To, for Web Applications
By: Chrysanthus Date Published: 29 Mar 2025
This tutorial explains How To Create a Responsive Horizontal Navigation Bar with Equal Hyperlink Widths. The navigation bar is responsive in the sense that, if the device screen is less than or equal to 600px, then the horizontal navigation bar will become a vertical navigation bar, with the hyperlinks below one another. The word, "navigation" as used in this light, means that the bar has hyperlinks and not logos or icons or buttons for some other purpose.
The complete webpage code is given at the end of this tutorial. The reader should copy the complete code into a text editor. Save the file with any name, but having the extension, .html . Open the files in a browser. Click a few hyperlinks. Keep reducing the width of the browser, observing how the horizontal bar is reducing in length, until it becomes a vertical bar. The reader is advised to do that before continuing to read the rest of this tutorial.
The webpage Skeleton Code
The web page skeleton code, to which more useful code will be added is:
<!DOCTYPE html>
<html>
<head>
<title>Equal Width Navbar hyperinks</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.">
<style>
@media screen and (max-width: 600px) {
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
</body>
</html>
Any modern responsible webpage should have at least the first four tags in the HTML head element. The HTML style element will have a lot of code (CSS rules). The style element has a media screen query for responsive behavior (small screens with width less than or equal to 600px). The script element will have a small JavaScript code for indicating the active hyperlink; see below. The body element will have the div for the bar with the hyperlinks.
The HTML body Element
The content of the HTML body element is:
<h2>Responsive Navbar with Links of Same Width</h2>
<p>Try to resize the browser window to see the responsive effect.</p>
<div class="navbar">
<a class="active" href="#" id='0' onclick="fn(id)">Home</a>
<a href="#" id='1' onclick="fn(id)">Search</a>
<a href="#" id='2' onclick="fn(id)">Contact</a>
<a href="#" id='3' onclick="fn(id)">Login</a>
</div>
There is only one div element. The web developer can add another div element below this one, for the main document content. The present div element is the horizontal bar with equal hyperlink widths. The class-name for this div bar is "navbar", which will be used in a CSS rule selector to style the div bar. There are four anchor elements in the bar. Remember that an anchor element is a hyperlink.
When the website loads, the very first anchor element is made active; see below, for more information.
Strategy
There are four hyperlinks (anchor elements). Anchor elements are by default, inline elements. This means that, when typed next to one another, they will appear in a horizontal line, at a browser.
The box-sizing property will be used, so that the width is measured from the left edge of the left border of the anchor element, to the right edge of the right end of the anchor element. This makes coding easy, for this kind of project. As there are four anchor elements, each anchor element is given a 25% width (25% + 25% + 25% + 25% = 100%).
The Style Element
All the presentation code for this example (tutorial) is within the start and end tags of the HTML style element.
The box-sizing Property
At the top within the style element content, is the CSS rule:
* {box-sizing: border-box}
This is called the box-sizing property. The asterisk, * in front of the rule, means that it is applied to all the containers, such as the div elements. The box-sizing property means that the width of each element is measured from the left edge of the left border, to the right edge of the opposite border, instead of from the left edge of the element's left content, to the right edge of the element's right content. The box-sizing property also means that the height of each element is measured from the top edge of the top border, to the bottom edge of the opposite border, instead of from the top edge of the element's top content, to the bottom edge of the element's bottom content. The box-sizing property makes coding convenient for projects like this one.
Styling the body Element
The CSS rule for the body element is just:
body {font-family: Arial, Helvetica, sans-serif;}
The font chosen for all the elements in the body is Arial. If the browser does not have Arial, then it is likely to have Helvetica. If it does not have Helvetica, then it most likely have some sans-serif font.
Styling the div Bar
The CSS rule for the div bar is:
div.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
The width is 100%, meaning that it will go from the left end of the webpage to the right end of the webpage. The background color is #555 (dark gray). The property, overflow and value, "auto" in this case with heavy formatting of the hyperlinks, means that all the hyperlink rectangles should be displayed, and not only the first one should be displayed. This is because all the anchor elements are floated left. It does not sound logical, but it works for all the major browsers.
Styling Each Anchor Element
The style for each anchor element is:
div.navbar a {
float: left;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
width: 25%; /* Four links of equal widths */
text-align: center;
}
The selector is, "div.navbar a". Each anchor element, represented by 'a', in the selector, is accessed through the class-name of the div bar. Each anchor (hyperlink) element is floated left. If this is not done, then the top and bottom padding of each anchor element will not appear at the browser. At this point, it is assumed that the reader knows the uses of all the other properties in the CSS rule. Read through the code.
Each of the Anchor Elements On-Hover
The CSS rule for this is:
div.navbar a:hover {
background-color: #000;
}
The class-name of the div bar is used to access all the anchor elements. On mouse over, the background color becomes black (#000), and the color of text remains what is was, white.
CSS Rule for Active Anchor Element
When a hyperlink is clicked, its section or page comes up to fill the screen. The clicked anchor element is said to be active. The CSS rule for an active hyperlink (anchor element) is:
div.navbar a.active {
background-color: #04AA6D;
}
Note that all the four anchor elements are accessed for this, through the class-name of the div bar. When active, the background color becomes #04AA6D (greenish) and the color of text remains at white.
Media Screen Query CSS Rule
When the screen width of the device is equal to 600px or less, some properties of all the anchor elements must change to have a vertical navigation bar. The media screen query for this is:
@media screen and (max-width: 600px) {
div.navbar a {
float: none;
display: block;
width: 100%;
}
}
Read through the code. The value of the float property for all the four anchor elements is made none. That is necessary. The value of each of the display property is made block. In that way all the anchor element will appear one below the other, giving a vertical look. This is also very important. Each of the anchor elements is given the maximum width of 100%, in order to occupy the whole width of the vertical bar. The rest of the anchor element properties remain the same as they were, for wide screens. Note that all the five anchor elements are accessed for this, through the class-name of the div bar.
JavaScript
When a hyperlink element (anchor element) is clicked, its background and text color should change to show that its section or page now fills the screen. The hyperlink is then said to be 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)">Home</a>
<a href="#" id='1' onclick="fn(id)">Search</a>
<a href="#" id='2' onclick="fn(id)">Contact</a>
<a href="#" id='3' onclick="fn(id)">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. Firstly, through the class attribute (class-name) for each anchor element, each anchor element is given the class-name "", which means nothing. Then the hyperlink clicked is given the class-name, "active" . The active CSS rule in the Style element becomes applicable to the clicked hyperlink.
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, in order to go to webpage 3, from a different webpage, should have id='3'. Webpage 3 must have the same hyperlink (anchor element), and it too must have id='3' .
The Complete Webpage Code
And there you have it: the complete webpage code is:
<!DOCTYPE html>
<html>
<head>
<title>Equal Width Navbar hyperinks</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.">
<style>
* {box-sizing: border-box}
body {font-family: Arial, Helvetica, sans-serif;}
div.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
div.navbar a {
float: left;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
width: 25%; /* Four links of equal widths */
text-align: center;
}
div.navbar a:hover {
background-color: #000;
}
div.navbar a.active {
background-color: #04AA6D;
}
@media screen and (max-width: 600px) {
div.navbar a {
float: none;
display: block;
width: 100%;
}
}
</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>
<h2>Responsive Navbar with Links of Same Width</h2>
<p>Try to resize the browser window to see the responsive effect.</p>
<div class="navbar">
<a class="active" href="#" id='0' onclick="fn(id)">Home</a>
<a href="#" id='1' onclick="fn(id)">Search</a>
<a href="#" id='2' onclick="fn(id)">Contact</a>
<a href="#" id='3' onclick="fn(id)">Login</a>
</div>
</body>
</html>
The reader should copy the complete code into a text editor. Save the file with any name, but having the extension, .html . Open the files in a browser. Click a few hyperlinks. Keep reducing the width of the browser, observing how the horizontal bar is reducing in length, until it becomes a vertical bar.
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