How to Create a Responsive Website Header - Part 1
In this detailed web development tutorial, I'll teach you how to create a responsive website side header, single-line top header, and multiple-line top header using HTML and CSS.
Your header is one of the most valuable parts of your website. It occupies the single most important piece of real estate on every page that you publish. It is the element that visitors encounter first. And it is the element that visitors interact with most.
That's a pretty strong incentive to make your header a good one.
So what exactly is a header? Simply stated, a header is the introduction to your website. Typically located along the top or side of each page, it provides high-level information and functionality.
A header may include:
- Elements that establish brand identity (name, logo, mascot, slogan, mission statement, etc.)
- Contact information (address, phone number, email, etc.)
- Links to navigate content
- Links to connect and share on social media
- Links to change region or language
- Fields and buttons to login, register, or subscribe
- A search bar
- A call-to-action (CTA) button
Okay, so what is a good header? A good header is:
- Informative in its content
- Concise in its presentation
- Intuitive in its functionality
- Built using design elements (graphics, fonts, colors, etc.) that are consistent with the established themes of your website
A good header also clearly answers three key questions for visitors:
- What is your website?
- Where on your website am I located?
- Where else on your website do I want to navigate?
This article, which is part 1 of a 5-part series of Web Development tutorials, will guide you through the process of creating a website header. We'll use HTML and CSS to construct three header layouts - Side Header, Single-Line Top Header, and Multiple-Line Top Header. With each example, we'll examine a complete web page demonstration before taking a detailed look at the concepts and code that bring it to life.
This article builds upon topics discussed in How to Create a Responsive Website Layout.
In this article, we'll use our standard HTML Document Structure and CSS Naming Convention.
Skip Ahead
Looking for something specific? Select a topic in this article to read more:
Side Header
In our first example, we'll construct a header that is located along the left side of our page:
A side header provides a layout that is well-suited for navigation menus with many links or long link names. It opens space in the vertical direction, allowing more of the main content area to be shown above the scroll. However, it also compresses space in the horizontal direction, forcing the main content area to be narrower.
This layout is most effective on medium and large screens. On small screens, the design responsively changes to a top header.
Let's start with the HTML used to create our responsive side header:
HTML
<!-- Header -->
<header class="header">
<!-- Title -->
<h1 class="title">
<a href="#home"
class="title_link">
My Website</a></h1>
<!-- Navigation -->
<nav>
<ul>
<li class="nav_menu_item">
<a href="#home"
class="nav_menu_link">
Home</a></li>
<li class="nav_menu_item">
<a href="#about"
class="nav_menu_link">
About</a></li>
<li class="nav_menu_item">
<a href="#products"
class="nav_menu_link">
Products</a></li>
<li class="nav_menu_item">
<a href="#services"
class="nav_menu_link">
Services</a></li></ul>
</nav>
</header>
First, we create our header area using the
<header>
element and assign it:
-
The
class="header"attribute to control the layout and style of the header area
The first item inside the header area is our title.
We create this item using the
<h1>
element and assign it:
-
The
class="title"attribute to control the style of the title
Inside the title we use the
<a>
element to create a title link that directs visitors to our home page when clicked.
We assign it:
-
The
href="#home"attribute to specify the destination of the title link -
The
class="title_link"attribute to control the style of the title link
The second item inside the header area is our navigation area.
We create this item using the
<nav>
element.
Inside the navigation area we create our navigation menu using the
<ul>
element.
Inside the navigation menu we create our navigation menu items using the
<li>
element and assign each:
-
The
class="nav_menu_item"attribute to control the layout and style of the navigation menu item
And inside each navigation menu item we use the
<a>
element to create a navigation menu link that directs visitors to the corresponding page when clicked.
We assign each:
-
The
href="..."attribute to specify the destination of the navigation menu link -
The
class="nav_menu_link"attribute to control the style of the navigation menu link
Next the CSS:
CSS
* {
box-sizing: border-box;
margin: 0;
border: 0;
padding: 0;
}
body {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}
/* Header */
.header {
flex: 0 0 auto;
width: 100%;
text-align: center;
background: #4040BF;
}
@media (min-width: 480px) {
.header {
width: 160px;
text-align: left;
}
}
/* Title */
.title {font: bold 16px / 1.5 sans-serif;}
.title_link {
display: block;
padding: 16px;
text-decoration: none;
color: #FFFFFF;
}
/* Navigation */
.nav_menu_item {
display: block;
font: 16px / 1.5 sans-serif;
}
.nav_menu_link {
display: block;
padding: 16px;
text-decoration: none;
color: #FFFFFF;
}
First, we create a CSS rule to control the default layout and style of all elements (unless otherwise specified). This rule applies the "border box" sizing model and resets margins, borders, and padding to 0.
Next we create a CSS rule to control the layout of the
body
element.
This CSS rule transforms the
body
element into a grid container that is:
- Left-aligned on all screens
Then, we create the
.header
CSS rule to control the layout and style of our header area.
This CSS rule transforms the header area into a grid module that is:
- 100% wide on small screens
- 160px wide on medium and large screens
Note that the header area text alignment changes from center-aligned on small screens to left-aligned on medium and large screens.
Next we create the
.title
CSS rule to control the style of our title.
Then, we create the
.title_link
CSS rule to control the style of our title link.
Next we create the
.nav_menu_item
CSS rule to control the layout and style of our navigation menu items.
Finally, we create the
.nav_menu_link
CSS rule to control the style of our navigation menu links.
And there you have it! A responsive side header.
The demonstration provided expands upon this code to show the header in a complete web page environment. It also includes extra features like hover states.
To see it in action, open the demonstration at the beginning of this example in a new window. View the source code in your web browser to see how the page is constructed.
To customize the demonstration, first save a local copy of the document on your computer. Then, open the file in your text editor to add, remove, and modify code to create your own web design masterpiece.
Single-Line Top Header
In our second example, we'll construct a header that is located along the top of our page, with the title and navigation menu occupying the same line:
A single-line top header provides a layout that is well-suited for navigation menus with few links or short link names. It is a compact design that allows much of the main content area to be shown above the scroll.
On small screens, the navigation menu items are displayed vertically. On medium and large screens, the navigation menu items are displayed horizontally.
Let's start with the HTML used to create our responsive single-line top header:
HTML
<!-- Header -->
<header class="header">
<div class="page header_container">
<!-- Title -->
<h1 class="title">
<a href="#home"
class="title_link">
My Website</a></h1>
<!-- Navigation -->
<nav class="nav">
<ul>
<li class="nav_menu_item">
<a href="#home"
class="nav_menu_link">
Home</a></li>
<li class="nav_menu_item">
<a href="#about"
class="nav_menu_link">
About</a></li>
<li class="nav_menu_item">
<a href="#products"
class="nav_menu_link">
Products</a></li>
<li class="nav_menu_item">
<a href="#services"
class="nav_menu_link">
Services</a></li></ul>
</nav>
</div>
</header>
First, we create our header area using the
<header>
element and assign it:
-
The
class="header"attribute to control the layout and style of the header area
Next we create our header container using the
<div>
element and assign it:
-
The
class="page header_container"attribute to control the layout of the header container
The first item inside the header container is our title.
We create this item using the
<h1>
element and assign it:
-
The
class="title"attribute to control the layout and style of the title
Inside the title we use the
<a>
element to create a title link that directs visitors to our home page when clicked.
We assign it:
-
The
href="#home"attribute to specify the destination of the title link -
The
class="title_link"attribute to control the style of the title link
The second item inside the header area is our navigation area.
We create this item using the
<nav>
element and assign it:
-
The
class="nav"attribute to control the layout of the navigation area
Inside the navigation area we create our navigation menu using the
<ul>
element.
Inside the navigation menu we create our navigation menu items using the
<li>
element and assign each:
-
The
class="nav_menu_item"attribute to control the layout and style of the navigation menu item
And inside each navigation menu item we use the
<a>
element to create a navigation menu link that directs visitors to the corresponding page when clicked.
We assign each:
-
The
href="..."attribute to specify the destination of the navigation menu link -
The
class="nav_menu_link"attribute to control the style of the navigation menu link
Next the CSS:
CSS
* {
box-sizing: border-box;
margin: 0;
border: 0;
padding: 0;
}
/* Page */
.page {
max-width: 640px;
margin: 0 auto;
}
@media (min-width: 960px) {
.page {max-width: 960px;}
}
/* Header */
.header {
font-size: 0;
text-align: center;
background: #4040BF;
}
.header_container {overflow: hidden;}
/* Title */
.title {font: bold 16px / 1.5 sans-serif;}
.title_link {
display: block;
padding: 16px;
text-decoration: none;
color: #FFFFFF;
}
@media (min-width: 480px) {
.title {
display: inline-block;
float: left;
}
}
/* Navigation */
.nav {}
.nav_menu_item {
display: block;
font: 16px / 1.5 sans-serif;
}
.nav_menu_link {
display: block;
padding: 16px;
text-decoration: none;
color: #FFFFFF;
}
@media (min-width: 480px) {
.nav {
display: inline-block;
float: right;
}
.nav_menu_item {display: inline-block;}
}
First, we create a CSS rule to control the default layout and style of all elements (unless otherwise specified). This rule applies the "border box" sizing model and resets margins, borders, and padding to 0.
Next we create the
.page
CSS rule to control the layout of our page area so that:
- The maximum width is 640px on small and medium screens
- The maximum width is 960px on large screens
Then, we create the
.header
CSS rule to control the layout and style of our header area.
We include:
-
The
font-size: 0;property to prevent browsers from adding undesirable whitespace around and between the title, navigation area, and navigation menu items (font size is redefined later so that all text is rendered to the correct size)
Next we create the
.header_container
CSS rule to control the layout of our header container.
We include:
-
The
overflow: hidden;property to allow the title and navigation area to be floated without collapsing the height of the header container
Then, we create the
.title
CSS rule to control the layout and style of our title.
Note that the title is displayed vertically on small screens and horizontally (as an inline-block) on medium and large screens.
Also note that the title is floated to the left on medium and large screens.
Next we create the
.title_link
CSS rule to control the style of our title link.
Then, we create the
.nav
CSS rule to control the layout of our navigation area.
Note that the navigation area is displayed vertically on small screens and horizontally (as an inline-block) on medium and large screens.
Also note that the navigation area is floated to the right on medium and large screens.
Next we create the
.nav_menu_item
CSS rule to control the layout and style of our navigation menu items.
Note that the navigation menu items are displayed vertically (as blocks) on small screens and horizontally (as inline blocks) on medium and large screens.
Finally, we create the
.nav_menu_link
CSS rule to control the style of our navigation menu links.
And there you have it! A responsive single-line top header.
The demonstration provided expands upon this code to show the header in a complete web page environment. It also includes extra features like hover states.
To see it in action, open the demonstration at the beginning of this example in a new window. View the source code in your web browser to see how the page is constructed.
To customize the demonstration, first save a local copy of the document on your computer. Then, open the file in your text editor to add, remove, and modify code to create your own web design masterpiece.
Multiple-Line Top Header
In our third example, we'll construct a header that is located along the top of our page, with the title and navigation menu occupying different lines:
A multiple-line top header provides a layout that is well-suited for navigation menus with few links or short link names. Though the design is not as compact as the single-line top header, it supports more navigation menu content. And it still allows much of the main content area to be shown above the scroll.
On small screens, the navigation menu items are displayed vertically. On medium and large screens, the navigation menu items are displayed horizontally.
Let's start with the HTML used to create our responsive multiple-line top header:
HTML
<!-- Header -->
<header class="header">
<!-- Title -->
<div class="title">
<h1 class="page title_heading">
<a href="#home"
class="title_heading_link">
My Website</a></h1>
</div>
<!-- Navigation -->
<nav class="nav">
<ul class="page">
<li class="nav_menu_item">
<a href="#home"
class="nav_menu_link">
Home</a></li>
<li class="nav_menu_item">
<a href="#about"
class="nav_menu_link">
About</a></li>
<li class="nav_menu_item">
<a href="#products"
class="nav_menu_link">
Products</a></li>
<li class="nav_menu_item">
<a href="#services"
class="nav_menu_link">
Services</a></li></ul>
</nav>
</header>
First, we create our header area using the
<header>
element and assign it:
-
The
class="header"attribute to control the layout of the header area
The first item inside the header area is our title area.
We create this item using the
<div>
element and assign it:
-
The
class="title"attribute to control the style of the title area
Inside the title area we create our title heading using the
<h1>
element and assign it:
-
The
class="page title_heading"attribute to control the layout and style of the title heading
And inside the title heading we use the
<a>
element to create a title heading link that directs visitors to our home page when clicked.
We assign it:
-
The
href="#home"attribute to specify the destination of the title heading link -
The
class="title_heading_link"attribute to control the style of the title heading link
The second item inside the header area is our navigation area.
We create this item using the
<nav>
element and assign it:
-
The
class="nav"attribute to control the style of the navigation area
Inside the navigation area we create our navigation menu using the
<ul>
element and assign it:
-
The
class="page"attribute to control the layout of the navigation menu
Inside the navigation menu we create our navigation menu items using the
<li>
element and assign each:
-
The
class="nav_menu_item"attribute to control the layout and style of the navigation menu item
And inside each navigation menu item we use the
<a>
element to create a navigation menu link that directs visitors to the corresponding page when clicked.
We assign each:
-
The
href="..."attribute to specify the destination of the navigation menu link -
The
class="nav_menu_link"attribute to control the style of the navigation menu link
Next the CSS:
CSS
* {
box-sizing: border-box;
margin: 0;
border: 0;
padding: 0;
}
/* Page */
.page {
max-width: 640px;
margin: 0 auto;
}
@media (min-width: 960px) {
.page {max-width: 960px;}
}
/* Header */
.header {
font-size: 0;
text-align: center;
}
/* Title */
.title {background: #4040BF;}
.title_heading {font: bold 24px / 1.5 sans-serif;}
.title_heading_link {
display: block;
padding: 16px;
text-decoration: none;
color: #FFFFFF;
}
/* Navigation */
.nav {background: #000000;}
.nav_menu_item {
display: block;
font: 16px / 1.5 sans-serif;
}
.nav_menu_link {
display: block;
padding: 16px;
text-decoration: none;
color: #FFFFFF;
}
@media (min-width: 480px) {
.nav_menu_item {display: inline-block;}
}
First, we create a CSS rule to control the default layout and style of all elements (unless otherwise specified). This rule applies the "border box" sizing model and resets margins, borders, and padding to 0.
Next we create the
.page
CSS rule to control the layout of our page areas so that:
- The maximum width is 640px on small and medium screens
- The maximum width is 960px on large screens
Then, we create the
.header
CSS rule to control the layout of our header area.
We include:
-
The
font-size: 0;property to prevent browsers from adding undesirable whitespace around and between the navigation menu items (font size is redefined later so that all text is rendered to the correct size)
Next we create the
.title
CSS rule to control the style of our title area.
Then, we create the
.title_heading
CSS rule to control the style of our title heading.
Next we create the
.title_heading_link
CSS rule to control the style of our title heading link.
Then, we create the
.nav
CSS rule to control the style of our navigation area.
Next we create the
.nav_menu_item
CSS rule to control the layout and style of our navigation menu items.
Note that the navigation menu items are displayed vertically (as blocks) on small screens and horizontally (as inline blocks) on medium and large screens.
Finally, we create the
.nav_menu_link
CSS rule to control the style of our navigation menu links.
And there you have it! A responsive multiple-line top header.
The demonstration provided expands upon this code to show the header in a complete web page environment. It also includes extra features like hover states.
To see it in action, open the demonstration at the beginning of this example in a new window. View the source code in your web browser to see how the page is constructed.
To customize the demonstration, first save a local copy of the document on your computer. Then, open the file in your text editor to add, remove, and modify code to create your own web design masterpiece.
More Parts in This Series
- Part 1 - Side Header, Single-Line Top Header, and Multiple-Line Top Header
- Part 2 - Modal Navigation Menu and Accordion Navigation Menu
- Part 3 - Subnavigation Menus
- Part 4 - Search and Share Bars
- Part 5 - Icon Bar