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 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 - a side header, a single-line top header, and a 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:

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 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:

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 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:

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 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