How To Create a Top Horizontal Navigation Bar with a Centered Hyperlink or Logo
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 Horizontal Navigation Bar with a Centered Hyperlink or Logo. For the example of this tutorial, there are five hyperlinks, which are Home, News, Contact, Search, and About . News and Contact are on the extreme left end of the bar; Search and About are on the extreme right end of the bar; and Home is at the center. No logo is used in the illustration. However, the rules established in this tutorial, will equally apply to logos.
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 smallest width that can be reached, with this design. 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>Centered Top Navigation</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>
</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 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:
<!-- Top navigation -->
<div class="topnav">
<!-- Centered link -->
<div class="centered">
<a href="#home" class="active" id='0' onclick="fn(id)">Home</a>
</div>
<!-- Left-aligned links (default) -->
<a href="#news" id='1' onclick="fn(id)">News</a>
<a href="#contact" id='2' onclick="fn(id)">Contact</a>
<!-- Right-aligned links -->
<div class="right">
<a href="#search" id='3' onclick="fn(id)">Search</a>
<a href="#about" id='4' onclick="fn(id)">About</a>
</div>
</div>
<div style="padding-left:16px">
<h2>Responsive Top Navigation with Centered and Right-Aligned Links</h2>
<p>Resize the browser window to see the responsive effect.</p>
</div>
There are two outer divs. The second one at the bottom, is for the main document content. The first outer div is for the horizontal bar. All the hyperlinks are inside this first div bar. The class-name of this first outer div is, "topnav". The first content of the div.topnav div is an inner div whose class-name is, "centered" . This div has the Home hyperlink (anchor element). This Home hyperlink will be at the center of the outer div bar.
After this inner div (within the outer div) are the first and second anchor elements (hyperlinks), which are News and Contact. These hyperlinks (anchor elements) are not inside any inner div. These hyperlinks will be floated left within the outer div bar.
After these hyperlinks that are not in any inner div, is an inner div with class-name, "right". This inner div has the remaining two hyperlinks. This inner div will be floated right. The float property is not applied to its nested hyperlinks. When it is floated right, it will go to the right with all its nested hyperlinks.
When the website loads, the very first anchor element is made active; in this case the Home anchor element is made active; see below for more information.
Strategy
The News and Contact hyperlinks (anchor elements) are floated to the left. They are not inside any inner div. There are two inner divs. The first one is for the Home hyperlink that will be at the center of the div bar. The second inner div has the last two hyperlinks, which will be floated right, within the div bar, as their inner div is floated right. The inner div will go to the right with its nested hyperlinks. These nested hyperlinks are not given any float property.
When elements inside a div are floated to the left and/or 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 div bar with class-name "topnav", is given the "overflow: hidden;" property in the style element. That does not look logical, but it works with all the major browsers.
The Home hyperlink to be centered is not fitted within the surface of the div bar, as that is not easy to do. It is easier to placed it in front of the div bar, at the exact horizontal center of the div bar. This is achieved using the position property.
The HTML Style Element
Styling the Body Element
The CSS rule for this is:
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
The margin all round the body element is zero. With that, the left edge of the horizontal bar will align with the left edge of the webpage. And the top edge of the horizontal bar will align with the top edge of the web page. And the right edge of the horizontal bar will align with the right edge of the webpage.
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.topnav {
overflow: hidden;
background-color: #333;
position: relative;
}
The "overflow: hidden;" property is used to contain all its floated elements as one assembly, when viewed. The background color is black (#333, but not the blackest black).
In order for the Home hyperlink to be placed at the horizontal center of the div bar, it needs the "position: absolute;" property. In order for the absolute position property to be effective with the Home hyperlink, the parent or grand parent container needs to have its own position property. In this case, the grand parent which is the outer div bar, has the relative position property. That is why there is the "position: relative;" property for the outer div bar. The parent container for the Home hyperlink is an inner div with class-name "centered".
CSS Rule Common to all Five Anchor Elements
The CSS rule common to all the five anchor elements is:
div.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
Remember that the Search and About anchor elements in the inner div with class-name "right", 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 them as well (as for the News and Contact).
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 use of the other properties in the CSS rule. Read through the code (of the above CSS rule).
Styling the Home Hyperlink
The CSS rule for the Home anchor element is:
div.centered a {
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
The Home anchor element is accessed through the inner div with class-name, "centered" . This inner div is coded as the first element for the outer div bar. So it is at the beginning of the outer div bar. The Home anchor element has the "position: absolute;" property, which is used in positioning it, in front of the outer div bar (towards the user), and at the horizontal center of the outer div bar. The z-index of the Home anchor element is 1, assuming that the z-index of the body element and its content such as the outer div bar, is zero.
The top end of the Home anchor element is displaced 50% down from the top end of the outer div bar, and the left end of the Home anchor element is displaced 50% to the right, from the left end of the outer div bar. With that arrangement alone, the center of the Home hyperlink will be slightly further down and slightly further to the right of the true center of the outer div bar. To make both centers be at the same spot, the "transform: translate(-50%, -50%);" is used.
Styling the Inner div with Class-name "right"
The CSS rule for this is:
div.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:
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 the 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.topnav a.active {
background-color: #04AA6D;
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 needed here. When active, the background color becomes #04AA6D (greenish) and the color of text becomes, white.
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:
<!-- Top navigation -->
<div class="topnav">
<!-- Centered link -->
<div class="centered">
<a href="#home" class="active" id='0' onclick="fn(id)">Home</a>
</div>
<!-- Left-aligned links (default) -->
<a href="#news" id='1' onclick="fn(id)">News</a>
<a href="#contact" id='2' onclick="fn(id)">Contact</a>
<!-- Right-aligned links -->
<div class="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>Centered Top Navigation</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;
}
div.topnav {
overflow: hidden;
background-color: #333;
position: relative;
}
div.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
div.centered a {
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
div.right {
float: right;
}
div.topnav a:hover {
background-color: #ddd;
color: black;
}
div.topnav a.active {
background-color: #04AA6D;
color: white;
}
</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>
<!-- Top navigation -->
<div class="topnav">
<!-- Centered link -->
<div class="centered">
<a href="#home" class="active" id='0' onclick="fn(id)">Home</a>
</div>
<!-- Left-aligned links (default) -->
<a href="#news" id='1' onclick="fn(id)">News</a>
<a href="#contact" id='2' onclick="fn(id)">Contact</a>
<!-- Right-aligned links -->
<div class="right">
<a href="#search" id='3' onclick="fn(id)">Search</a>
<a href="#about" id='4' onclick="fn(id)">About</a>
</div>
</div>
<div style="padding-left:16px">
<h2>Responsive Top Navigation with Centered and Right-Aligned Links</h2>
<p>Resize the browser window to see the responsive effect.</p>
</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 smallest width that can be reached, with this design.
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