How to Create a Responsive Header
Header
How To, for Web Applications
By: Chrysanthus Date Published: 6 Apr 2025
This tutorial explains how to create a responsive header. A responsive header is a top horizontal navigation bar, in which the hyperlinks are floated to the right and the logo is floated to the left, for a wide screen. It is responsive in the sense that, when the device screen is less than or equal to 600px, all the hyperlinks beginning with the logo, becomes a vertical bar.
At the end of this tutorial is the complete webpage code. The reader should copy all the code into a text editor. Save the file with any name, but having the extension, .html . Open the saved file in the browser to appreciate how the header appears. Reduce the width of the browser continuously until the header becomes a vertical bar. The reader is advised do that before continuing to read this tutorial.
The HTML Skeleton Code
The skeleton code for the webpage, to which more useful code will be added is:
<!DOCTYPE html>
<html>
<head>
<title>Responsive Header</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 above. The HTML style element will have a lot of code for styling the bar div and the hyperlinks. The style element also has a media screen query for responsiveness. The HTML script element will have a short JavaScript, to indicate which hyperlink is "active". The HTML body element will have the horizontal bar div, that will contain the logo and the hyperlinks.
Content the of HTML body Element
The content of the HTML body element is:
<div class="header">
<a href="#default" class="logo">CompanyLogo</a>
<div class="header-right">
<a class="active" href="#home">Home</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
</div>
<div style="padding-left:20px">
<h1>Responsive Header</h1>
<p>Resize the browser window to see the effect.</p>
<p>Some content..</p>
</div>
There are actually two div element containers. The first one is for the horizontal bar div, with its logo and hyperlinks. The second one is for the main document content. The HTML body element will have a margin of zero, for all its four margins. That is why the left padding of the second div is big enough, by the attribute, "style='padding-left:20px' " so that the text in the main div will have some good indentation from the left edge of the webpage.
The class-name of the horizontal bar div is "header". An anchor element is the code for the hyperlink. The first element inside this div is an anchor element. This anchor element has the logo. The logo is the text, CompanyLogo , which is the content of the anchor element. The class-name for this anchor element is "logo". The href (URL) value for this anchor element is "#default" . This means that, when this anchor element is clicked, the section or webpage of "#default", will be loaded to the browser screen. This anchor element will be floated left, in the bar div.
The second element in the bar div is an inner div, whose class-name is "header-right" . This inner div has three expected anchor elements (hyperlinks), which are: Home, Contact and About. This div will be floated to the right of the horizontal bar div. The three anchor elements which are inline elements (occur in one line) will be floated to the right, along with their parent inner div container.
The first anchor element in the inner div, has the class-name "active" . This anchor element is for the Home page (or Home section). This means that, when the website is loaded, the first time, the Home section (or Home page) will fill the screen, and the Home anchor element (hyperlink) will be given a special active presentation, by a CSS rule in the style element.
Styling Important Elements in the HTML body
The styling for the horizontal bar div and its contents, are in the HTML style element.
The box-sizing Property
At the top within the style element tags, 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 content, to the right edge of the element's 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 content, to the bottom edge of the element's content. The box-sizing property makes coding convenient for projects like this one.
CSS Rule for the body Element
The CSS rule for the body element is:
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
The four margins of the body element is zero. This means that the left, top and right edges of the navigational bar div, will align with the left, top and right edges of the body element, respectively. The font to be used by the elements in the body is Arial. If the browser does not have Arial, then it should have Helvetica. If the browser does not have Helvetica, then any sans-serif font that the browser has, should be used.
Styling the Navigation Bar div
The CSS rule for the navigation bar div is:
div.header {
overflow: hidden;
background-color: #f1f1f1;
padding: 20px 10px;
}
The div.header is a container. Any div with internal elements floated left and/or right, with heavy styling, should have the "overflow: hidden;" property and value. Otherwise, the div will not contain all its internal elements appropriately, in one assembly. This does not sound logical, but it works with all the major browsers. The background color of this div is #f1f1f1 (light gray). The top and bottom padding is 20px. The left and right padding is 10px.
Styling the div.header-right
The class-name for the inner div in the navigation horizontal bar div, is header-right. The CSS rule for this inner div is:
div.header-right {
float: right;
}
div.header-right is floated right. Though the anchor elements in the inner div are floated left (see below), for all the anchor elements, the three in the inner div are floated right, because their parent container is floated right.
Styling all the Anchor Elements in the Bar div
The CSS rule for each of the anchor elements in the bar div is:
div.header a {
float: left;
padding: 12px;
color: black;
font-size: 18px;
text-align: center;
line-height: 25px;
border-radius: 4px;
text-decoration: none;
}
The div.header has a logo anchor element and the inner div.header-right with its three other anchor elements. The selector "div.header a" is applicable to the child logo anchor element, as well as all grand children anchor elements. That means that it is applicable to the three anchor elements in the inner div.header-right (as well).
Each of the anchor elements is floated left. If this is not done, the anchor elements inside the bar div, will not assert their given top and bottom padding. Though all the anchor elements are floated left, the three anchor elements inside the inner div.header-right, will be floated right, because their parent div is floated right. The padding of the four sides of each of the anchor elements is 12px. The text color of each of the anchor elements is black. This includes the logo anchor element, unless that is overridden by a different CSS rule (see below). The font-size of each of the anchor elements is 18px. This includes the logo anchor element, unless that is overridden by a different CSS rule (see below). The text-alignment of each of the anchor elements is center. This includes the logo anchor element, unless that is overridden by a different CSS rule (see below).
The line-height of each of the anchor elements is 25px. This includes the logo anchor element, unless that is overridden by a different CSS rule (see below). A higher value for line-height means bigger top and bottom padding for each of the anchor elements. The corners of each of the anchor elements' rectangle is rounded by 4px (radius). This includes the logo anchor element, unless that is overridden by a different CSS rule (see below). No text as content for any of the anchor elements is underlined. This includes the logo anchor element, unless that is overridden by a different CSS rule (see below).
Styling the Logo Anchor Elements
The CSS rule for the logo anchor element is:
div.header a.logo {
font-size: 25px;
font-weight: bold;
}
Recall that the logo in the HTML body element is actually text, and not an image. The logo is CompanyLogo. So all the CSS text properties for each of the anchor elements given above, are applicable to this logo, unless they are overridden in this CSS rule. The font-size of the logo text is 25px, and it overrides the property of "font-size: 18px;" given above. That is, the font-size of the logo text is 25px, while the font-size of the text as content, for the rest of the anchor elements, is 18px.
The font-weight for the logo text is bold. This overrides the normal font-weight for the logo, that is the default.
Each Anchor Element On-hover
The CSS rule for this is:
div.header a:hover {
background-color: #ddd;
color: black;
}
When the mouse pointer goes over an anchor element, the background color becomes #ddd (darker gray than #f1f1f1); the color of text becomes black. This is applicable to both the logo anchor element outside the inner div (but still inside the div bar) and the grand-children anchor elements inside the inner div (still inside the div bar).
The active Anchor Element
When an anchor element is clicked and its section or webpage comes up to fill the screen, that anchor element is said to be active. The CSS rule for this is:
div.header a.active {
background-color: dodgerblue;
color: white;
}
The background color becomes dodgerblue and the text color becomes white. This is applicable to all the anchor elements: the logo and grand children anchor elements. Do not forget that, when clicked, the logo too, has to bring up its section or webpage to fill the screen.
The Media Screen Query
When the webpage is watched at a screen whose width is less than or equal to 600px, all the anchor elements have to become vertical, instead of remaining horizontal and go past the right edge of the screen. This is responsive behavior. This needs a CSS media screen query, which is:
@media screen and (max-width: 600px) {
div.header-right {
float: none;
}
div.header a {
float: none;
display: block;
text-align: left;
}
}
Recall that the anchor elements in the inner div were first floated left and then effectively floated right. The "float: none;" property and value annuls all that floating, so that they are now free, to be manipulated. The second CSS rule in the media screen query annuls the left floating property for the logo anchor element, as well.
In the second CSS rule, the display of all the anchor elements is made block. With this, all the four anchor elements will be displayed one below the other, with the logo anchor element being at the top. All the anchor elements are left aligned.
JavaScript
The HTML code for the bar div that has the child anchor element (logo) and the grand children anchor elements is:
<a href="#default" class="logo" id='0' onclick="fn(id)">CompanyLogo</a>
<div class="header-right">
<a class="active" href="#home" id='1' onclick="fn(id)">Home</a>
<a href="#contact" id='2' onclick="fn(id)">Contact</a>
<a href="#about" id='3' onclick="fn(id)"">About</a>
</div>
</div>
Each of the anchor elements has the onclick event. On-click, the fn(id) function in the JavaScript is called. The Home anchor element has the attribute, "class='active'" . This means that when the website is first loaded, the Home anchor element will be highlighted as the active anchor element. Of course, the Home section will fill the screen. Actually, any anchor element can be highlighted, with 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>
Firstly, all the anchor element references are got into the array, called the collection. The ID of each of the anchor elements in the body element, has to be the same as the corresponding zero based index in the collection. All the values of the class-names (body element class attributes) are then made, "" . The particular anchor element that was clicked, is then given the value, "active". The CSS rule, "div.header a.active" , then applies to it.
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 presentation (active). For a multi-page website, with separate web-pages, use JavaScript similar to the following, to give the "active" hyperlink, the active presentation:
<script>
if (window.location.href == 'replace with URL for Webpage 3') {
document.getElementById('3').className = "active";
}
</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 is:
<!DOCTYPE html>
<html>
<head>
<title>Responsive Header</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>
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
div.header {
overflow: hidden;
background-color: #f1f1f1;
padding: 20px 10px;
}
div.header-right {
float: right;
}
div.header a {
float: left;
padding: 12px;
color: black;
font-size: 18px;
text-align: center;
line-height: 25px;
border-radius: 4px;
text-decoration: none;
}
div.header a.logo {
font-size: 25px;
font-weight: bold;
}
div.header a:hover {
background-color: #ddd;
color: black;
}
div.header a.active {
background-color: dodgerblue;
color: white;
}
@media screen and (max-width: 600px) {
div.header-right {
float: none;
}
div.header a {
float: none;
display: block;
text-align: left;
}
}
</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="header">
<a href="#default" class="logo" id='0' onclick="fn(id)">CompanyLogo</a>
<div class="header-right">
<a class="active" href="#home" id='1' onclick="fn(id)">Home</a>
<a href="#contact" id='2' onclick="fn(id)">Contact</a>
<a href="#about" id='3' onclick="fn(id)"">About</a>
</div>
</div>
<div style="padding-left:20px">
<h1>Responsive Header</h1>
<p>Resize the browser window to see the effect.</p>
<p>Some content..</p>
</div>
</body>
</html>
The reader should copy all the code into a text editor. Save the file with any name, but having the extension, .html . Open the saved file in the browser to appreciate how the header appears. Reduce the width of the browser continuously until the header becomes a vertical bar.
Chrys