How To Create a Responsive Top Navigation Bar with Left-aligned and Right-aligned Hyperlinks
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 Top Navigation Bar with Left-aligned and Right-aligned Hyperlinks. In the project for this tutorial, there are five hyperlinks. Three are on the left in the bar and two are on the right in the bar. It is responsive in the sense that when the device screen is 600px or less, all the hyperlinks of both sides go into a vertical bar.
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.
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, but with the extension, .html . Open the file in the browser. Click a few hyperlinks: nothing will happen because for this pedagogic (teaching) exercise, the destination sections or pages, are not provided. Keep reducing the width of the browser to see the responsive effect. The reader is advised to do that before continuing to read the rest of this tutorial.
Web Page Skeleton Code
The skeleton code for which more useful code will be added is:
<!DOCTYPE html>
<html>
<head>
<title>Navigation Bar with Left-aligned and Right-aligned Hyperlinks</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 for the body element is:
<div class="topnav">
<a class="active" href="#home" 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>
<div class="topnav-right">
<a href="#search" id='3' onclick="fn(id)">Search</a>
<a href="#about" id='4' onclick="fn(id)">About</a>
</div>
</div>
The div for the bar has the class-name, "topnav" . It has the first three hyperlinks (anchor elements), then an inner div follows inside. The class name for this inner div is "topnav-right" . This inner div has two nested hyperlinks.
The first three anchor elements will be floated to the left at large screen view. At large screen view the inner div will be floated to the right. It will go to the right with its two nested anchor elements.
The anchor element is the code for a hyperlink.
The web developer (programmer) should add another div below the bar div, for the main document content.
When the website loads, the very first anchor element is made active; see below for more information.
Strategy
The first three hyperlinks (anchor elements) are floated to the left. They are not inside any inner div. The only inner div in the bar is floated to the right, and it goes to the right end with its two hyperlinks (anchor elements). The floated property is not given to these two hyperlinks.
When elements inside a div are floated to the left and/or the right, the div may not contain all the elements in one assembly when displayed, especially when the elements are styled as in this project. To resolve this problem, the bar div with class-name "topnav", is given the "overflow: hidden;" property in the style element. That does not look logical, but it works will all the major browsers.
For the particular responsive situation, when the device screen is less than or equal to 600px, the five anchor elements (hyperlinks) are all given the value of none, for the float property. The inner div is also given the value of none, for the float property. All the five hyperlinks are made block ("display: block;") . With the "display: block;" property, all the five anchor elements will be displayed, one below the other, vertically.
The HTML Style Element
Styling the Bar div
The CSS rule for the bar div is:
/* Add a black background color to the top navigation */
div.topnav {
overflow: hidden;
background-color: #333;
}
The background color is black (#333, but not the blackest black). The "overflow: hidden;" property is used to contain all its floated elements as one assembly, when viewed.
CSS Rule Common to all Five Anchor Elements
The CSS rule common to the first three anchor elements floated left and the two anchor elements in the inner div floated right, is:
/* Style the links inside the navigation bar */
div.topnav a {
float: left;
color: #f2f2f2;
font-size: 17px;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
Remember that the two anchor elements in the inner div, do not have the float property. It is their inner container div that has the float right property. However, the CSS rule above is applicable to those two, as well (as the first three). Note that this CSS rule is applicable to the five anchor (a) elements for wide screens. For screens with widths less than or equal to 600px, some modification is necessary; see below.
All the anchor elements are floated left, which make sense. Though the two nested anchor elements of the inner div are floated left, their container is floated right. So they are effectively floated right, so far as the whole horizontal bar is concerned. The reader should note that if these five anchor elements are not floated left, the height of their top and bottom padding will not appear (at the browser). At this point, it is assumed that the reader knows the uses of the other properties in the CSS rule. Read through the code (of the above CSS rule).
Styling the Inner div
The CSS rule for the inner div is:
/* Right-aligned section inside the top navigation */
div.topnav-right {
float: right;
}
That is all: it is floated right. It goes to the right of the outer div with its two anchor elements.
Each of the Five Anchor Elements On-Hover
The CSS rule for this is:
/* Change the color of links on hover */
div.topnav a:hover {
background-color: #ddd;
color: black;
}
The class-name of the outer div is used to access all the five anchor elements. The class-name for the inner div is not needed to be in the selector, for this case. On mouse over, the background color becomes, #ddd (light gray) and the color of text becomes black.
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:
/* Add a color to the active/current link */
div.topnav a.active {
background-color: #04AA6D;background color becomes
color: white;
}
Note that all the five anchor elements are accessed for this, through the class-name of the outer div bar. The class-name of the inner div is not necessary here. When active, the background color becomes #04AA6D (greenish) and the color of text becomes, 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 and the float property of the inner div for the two anchor elements, must change to have a vertical navigation bar. The media screen query for this is:
@media screen and (max-width: 600px) {
div.topnav a {
float: none;
display: block;
width: 100%;
}
div.topnav-right {
float: none;
}
}
Read through the code. The value of the float property for all the five anchor elements is made none. That is necessary. The value of each of the display property is made block. In that way, all the five anchor elements 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%. 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 outer div bar. The class-name of the inner div is not needed here.
The value of the float property for the inner div is made none. In that way, its two anchor elements will be centered horizontally, like the first three anchor elements.
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="topnav">
<a class="active" href="#home" 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>
<div class="topnav-right">
<a href="#search" id='3' onclick="fn(id)">Search</a>
<a href="#about" id='4' onclick="fn(id)">About</a>
</div>
</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, News, Contact, Search, and About 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>Navigation Bar with Left-aligned and Right-aligned Hyperlinks</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>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
/* Add a black background color to the top navigation */
div.topnav {
overflow: hidden;
background-color: #333;
}
/* Style the links inside the navigation bar */
div.topnav a {
float: left;
color: #f2f2f2;
font-size: 17px;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Right-aligned section inside the top navigation */
div.topnav-right {
float: right;
}
/* Change the color of links on hover */
div.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
div.topnav a.active {
background-color: #04AA6D;
color: white;
}
@media screen and (max-width: 600px) {
div.topnav a {
float: none;
display: block;
width: 100%;
}
div.topnav-right {
float: none;
}
}
</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="topnav">
<a class="active" href="#home" 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>
<div class="topnav-right">
<a href="#search" id='3' onclick="fn(id)">Search</a>
<a href="#about" id='4' onclick="fn(id)">About</a>
</div>
</div>
</body>
</html>
The reader should copy the complete code into a text editor. Save the file with any name, but with the extension, .html . Open the file in the browser. Click a few hyperlinks: nothing will happen because for this pedagogic (teaching) exercise, the destination sections or pages are not provided. Keep reducing the width of the browser to see the responsive effect ultimately.
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 . . .NEXT