How to Create a Responsive Website Header - Part 1

Web Development Post by Christopher Spicer
Responsive Website Header

Your header is one of the most valuable assets to 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 in three styles of layout. We'll use HTML and CSS to construct a side header, a single-line top header, and a multiple-line top header. With each example, we’ll examine a complete 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:

See Demo

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 large screens. So on small screens, we configure the design to responsively change to a top header layout.

Let's start with the HTML used to create our responsive side header layout:

HTML

<div class="grid"> <!-- Header --> <header class="grid_mod-header" id="header"> <!-- Title --> <div id="title"> <div class="bar"> <h1 class="bar_item"> <a href="#home" class="bar_link"> My Website</a></h1> </div> </div> <!-- Navigation --> <nav id="nav"> <ul class="bar"> <li class="bar_item"> <a href="#home" class="bar_link"> Home</a></li> <li class="bar_item"> <a href="#about" class="bar_link"> About</a></li> <li class="bar_item"> <a href="#products" class="bar_link"> Products</a></li> <li class="bar_item"> <a href="#services" class="bar_link"> Services</a></li> </ul> </nav> </header> </div>

First we create our grid container using the <div> element and assign it:

  • The class="grid" attribute to control the behavior of the grid container

Next we create our header using the <header> element and assign it:

  • The class="grid_mod-header" attribute to control the behavior of the grid module
  • The id="header" attribute to define the CSS rules that apply uniquely to this section

The first section inside our header contains the title bar for our website. We create this section using the <div> element and assign it:

  • The id="title" attribute to define the CSS rules that apply uniquely to this section

Inside this section we create our title bar using the <div> element.

Inside the title bar we create our title heading using the <h1> element.

And inside the title heading we create a link using the <a> element that directs visitors to our home page when clicked.

The second section inside our header contains the navigation menu for our website. We create this section using the <nav> element and assign it:

  • The id="nav" attribute to define the CSS rules that apply uniquely to this section

Inside this section we create our navigation menu using the <ul> element.

Inside the navigation menu we create our navigation menu items using the <li> element for each.

And inside each navigation menu item we create a link using the <a> element that directs visitors to the corresponding page when clicked.

Next the CSS:

CSS

* { box-sizing: border-box; margin: 0; border: 0; padding: 0; } .page { max-width: 640px; margin: 0 auto; } @media (min-width: 960px) { .page {max-width: 960px;} } .grid { display: flex; flex-flow: row wrap; justify-content: flex-start; } @media (max-width: 479px) { .grid_mod-header { flex: 0 0 auto; width: 100%; } } @media (min-width: 480px) { .grid_mod-header { flex: 0 0 auto; width: 160px; } } /* Header */ #header {background: #4040BF;} /* Title */ #title .bar {text-align: center;} #title .bar_item { display: block; font: bold 16px / 1.5 sans-serif; } #title .bar_link { display: block; padding: 16px; text-decoration: none; color: #FFFFFF; } @media (min-width: 480px) { #title .bar {text-align: left;} } /* Navigation */ #nav .bar {text-align: center;} #nav .bar_item { display: block; font: 16px / 1.5 sans-serif; } #nav .bar_link { display: block; padding: 16px; text-decoration: none; color: #FFFFFF; } @media (min-width: 480px) { #nav .bar {text-align: left;} }

First we create the CSS rules to drive our responsive, grid-based layout.

To construct the side header layout we need to create a unique grid module for this purpose. We name this grid module grid_mod-header. And it behaves such that it is:

  • 100% wide on small screens (479px and below)
  • 160px wide on medium and large screens (480px and above)

Next we create a CSS rule to apply a background color to our header. We name this rule #header.

Then we create a set of CSS rules to style the title bar section of our header. Each rule is preceded by the #title selector.

Note that the title bar text alignment changes from center-aligned on small screens to left-aligned on medium and large screens.

Finally we create a set of CSS rules to style the navigation menu section of our header. Each rule is preceded by the #nav selector.

Note that the navigation menu text alignment changes from center-aligned on small screens to left-aligned on medium and large screens.

And there you have it! A responsive side header.

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 bar and navigation menu occupying the same line:

See Demo

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 large screens, navigation menu items are displayed horizontally. On small screens, we configure the design to responsively change so that navigation menu items are displayed vertically.

Let's start with the HTML used to create our responsive single-line top header layout:

HTML

<!-- Header --> <header id="header"> <div class="page grid"> <!-- Title --> <div class="grid_mod-sm-12 grid_mod-md-4 grid_mod-lg-4" id="title"> <div class="bar"> <h1 class="bar_item"> <a href="#home" class="bar_link"> My Website</a></h1> </div> </div> <!-- Navigation --> <nav class="grid_mod-sm-12 grid_mod-md-8 grid_mod-lg-8" id="nav"> <ul class="bar"> <li class="bar_item"> <a href="#home" class="bar_link"> Home</a></li> <li class="bar_item"> <a href="#about" class="bar_link"> About</a></li> <li class="bar_item"> <a href="#products" class="bar_link"> Products</a></li> <li class="bar_item"> <a href="#services" class="bar_link"> Services</a></li> </ul> </nav> </div> </header>

First we create our header using the <header> element and assign it:

  • The id="header" attribute to define the CSS rules that apply uniquely to this section

Next we create our page and grid container using the <div> element and assign it:

  • The class="page grid" attribute to control the width and behavior of the page and grid container

The first section inside our header contains the title bar for our website. We create this section using the <div> element and assign it:

  • The class="grid_mod-sm-12 grid_mod-md-4 grid_mod-lg-4" attribute to control the behavior of the grid module (100% wide on small screens and 33.33% wide on medium and large screens)
  • The id="title" attribute to define the CSS rules that apply uniquely to this section

Inside this section we create our title bar using the <div> element.

Inside the title bar we create our title heading using the <h1> element.

And inside the title heading we create a link using the <a> element that directs visitors to our home page when clicked.

The second section inside our header contains the navigation menu for our website. We create this section using the <nav> element and assign it:

  • The class="grid_mod-sm-12 grid_mod-md-8 grid_mod-lg-8" attribute to control the behavior of the grid module (100% wide on small screens and 66.66% wide on medium and large screens)
  • The id="nav" attribute to define the CSS rules that apply uniquely to this section

Inside this section we create our navigation menu using the <ul> element.

Inside the navigation menu we create our navigation menu items using the <li> element for each.

And inside each navigation menu item we create a link using the <a> element that directs visitors to the corresponding page when clicked.

Next the CSS:

CSS

* { box-sizing: border-box; margin: 0; border: 0; padding: 0; } .page { max-width: 640px; margin: 0 auto; } @media (min-width: 960px) { .page {max-width: 960px;} } .grid { display: flex; flex-flow: row wrap; justify-content: center; } @media (max-width: 479px) { .grid_mod-sm-12 { flex: 0 0 auto; width: 100%; } } @media (min-width: 480px) and (max-width: 959px) { .grid_mod-md-4 { flex: 0 0 auto; width: 33.33%; } .grid_mod-md-8 { flex: 0 0 auto; width: 66.66%; } } @media (min-width: 960px) { .grid_mod-lg-4 { flex: 0 0 auto; width: 33.33%; } .grid_mod-lg-8 { flex: 0 0 auto; width: 66.66%; } } /* Header */ #header {background: #4040BF;} /* Title */ #title .bar { font-size: 0; text-align: center; } #title .bar_item { display: block; font: bold 16px / 1.5 sans-serif; } #title .bar_link { display: block; padding: 16px; text-decoration: none; color: #FFFFFF; } @media (min-width: 480px) { #title .bar {text-align: left;} #title .bar_item {display: inline-block;} } /* Navigation */ #nav .bar { font-size: 0; text-align: center; } #nav .bar_item { display: block; font: 16px / 1.5 sans-serif; } #nav .bar_link { display: block; padding: 16px; text-decoration: none; color: #FFFFFF; } @media (min-width: 480px) { #nav .bar {text-align: right;} #nav .bar_item {display: inline-block;} }

First we create the CSS rules to drive our responsive, grid-based layout.

Next we create a CSS rule to apply a background color to our header. We name this rule #header.

Then we create a set of CSS rules to style the title bar section of our header. Each rule is preceded by the #title selector.

Note that the title bar text alignment changes from center-aligned on small screens to left-aligned on medium and large screens.

Also note that the title heading is displayed as a block on small screens and as an inline-block on medium and large screens. The font size of the title bar is set to 0 to prevent browers from adding undesirable whitespace around the title heading. The font size of the title heading is then set to 16px so that the text is rendered to the correct size.

Finally we create a set of CSS rules to style the navigation menu section of our header. Each rule is preceded by the #nav selector.

Note that the navigation menu text alignment changes from center-aligned on small screens to right-aligned on medium and large screens.

Also note that the navigation menu items are displayed vertically (as blocks) on small screens and horizontally (as inline-blocks) on medium and large screens. The font size of the navigation menu is set to 0 to prevent browers from adding undesirable whitespace around and between the navigation menu items. The font size of each navigation menu item is then set to 16px so that the text is rendered to the correct size.

And there you have it! A responsive single-line top header.

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 bar and navigation menu occupying different lines:

See Demo

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 large screens, navigation menu items are displayed horizontally. On small screens, we configure the design to responsively change so that navigation menu items are displayed vertically.

Let's start with the HTML used to create our responsive multiple-line top header layout:

HTML

<!-- Header --> <header> <!-- Title --> <div id="title"> <div class="page"> <div class="bar"> <h1 class="bar_item"> <a href="#home" class="bar_link"> My Website</a></h1> </div> </div> </div> <!-- Navigation --> <nav id="nav"> <div class="page"> <ul class="bar"> <li class="bar_item"> <a href="#home" class="bar_link"> Home</a></li> <li class="bar_item"> <a href="#about" class="bar_link"> About</a></li> <li class="bar_item"> <a href="#products" class="bar_link"> Products</a></li> <li class="bar_item"> <a href="#services" class="bar_link"> Services</a></li> </ul> </div> </nav> </header>

First we create our header using the <header> element.

The first section inside our header contains the title bar for our website. We create this section using the <div> element and assign it:

  • The id="title" attribute to define the CSS rules that apply uniquely to this section

Inside this section we create our page container using the <div> element and assign it:

  • The class="page" attribute to control the width of the page container

Inside the page container we create our title bar using the <div> element.

Inside the title bar we create our title heading using the <h1> element.

And inside the title heading we create a link using the <a> element that directs visitors to our home page when clicked.

The second section inside our header contains the navigation menu for our website. We create this section using the <nav> element and assign it:

  • The id="nav" attribute to define the CSS rules that apply uniquely to this section

Inside this section we create our page container using the <div> element and assign it:

  • The class="page" attribute to control the width of the page container

Inside the page container we create our navigation menu using the <ul> element.

Inside the navigation menu we create our navigation menu items using the <li> element for each.

And inside each navigation menu item we create a link using the <a> element that directs visitors to the corresponding page when clicked.

Next the CSS:

CSS

* { box-sizing: border-box; margin: 0; border: 0; padding: 0; } .page { max-width: 640px; margin: 0 auto; } @media (min-width: 960px) { .page {max-width: 960px;} } /* Title */ #title {background: #4040BF;} #title .bar { font-size: 0; text-align: center; } #title .bar_item { display: block; font: bold 24px / 1.5 sans-serif; } #title .bar_link { display: block; padding: 16px; text-decoration: none; color: #FFFFFF; } @media (min-width: 480px) { #title .bar_item {display: inline-block;} } /* Navigation */ #nav {background: #000000;} #nav .bar { font-size: 0; text-align: center; } #nav .bar_item { display: block; font: 16px / 1.5 sans-serif; } #nav .bar_link { display: block; padding: 16px; text-decoration: none; color: #FFFFFF; } @media (min-width: 480px) { #nav .bar_item {display: inline-block;} }

First we create the CSS rules to drive our responsive layout.

Then we create a set of CSS rules to style the title bar section of our header. Each rule is preceded by the #title selector.

Note note that the title heading is displayed as a block on small screens and as an inline-block on medium and large screens. The font size of the title bar is set to 0 to prevent browers from adding undesirable whitespace around the title heading. The font size of the title heading is then set to 24px so that the text is rendered to the correct size.

Finally we create a set of CSS rules to style the navigation menu section of our header. Each rule is preceded by the #nav selector.

Note that the navigation menu items are displayed vertically (as blocks) on small screens and horizontally (as inline-blocks) on medium and large screens. The font size of the navigation menu is set to 0 to prevent browers from adding undesirable whitespace around and between the navigation menu items. The font size of each navigation menu item is then set to 16px so that the text is rendered to the correct size.

And there you have it! A responsive multiple-line top header.

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