How to Create a Responsive Website Header - Part 4

In this detailed web development tutorial, I'll teach you how to create a responsive website header with dropdown search and share bars using HTML, CSS, and JavaScript.

Responsive Website Header with Search and Share Bars

This article, which is part 4 of a 5-part series of Web Development tutorials, will guide you through the process of creating a website header. We'll use HTML, CSS, and JavaScript to construct a header layout with Search and Share Bars that open and close as needed. In this 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:

Search and Share Bars

In this example, we'll build upon our Accordion Navigation Menu design to include search and share bars that open and close as needed:

Open Demo

A search and share bar provides visitors with an enhanced ability to find content on our website and to communicate it with a larger audience using social media platforms. When a visitor submits a search query, all of the relevant pages within our website domain are returned as standard search engine results. When a visitor clicks on a social media link, our website is automatically shared to the corresponding platform.

On small screens, the search and share menus are simply added to the end of the existing site menu.

On medium and large screens, the search and share menus behave as dropdowns. When a visitor selects a button from the search and share bar, the corresponding menu opens. When a visitor deselects a button from the search and share bar, the corresponding menu closes.

Header Structure and Style

First, we create our header area.

The construction of the header area is similar to our Accordion Navigation Menu design. But we add:

  • CSS to allow the dropdown behavior

Let's start with the HTML used to create the header area for our responsive search and share bar design:

HTML
                    
<!-- Header -->



<header class="header">



  <!-- Title -->



  ...



  <!-- Navigation Group -->



  ...



</header>

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

  • The class="header" attribute to control the layout of the header area

Next the CSS:

CSS
                    
* {

  box-sizing: border-box;

  margin: 0;

  border: 0;

  padding: 0;

}



body {position: relative;}



/* Page */



.page {

  max-width: 640px;

  margin: 0 auto;

}



@media (min-width: 960px) {

  .page {max-width: 960px;}

}



/* Header */



.header {

  font-size: 0;

  text-align: center;

}

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. We include:

  • The position: relative; property to allow the subnavigation areas to be positioned relative to the body element

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

Finally, 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 title heading, navigation menu items, and subnavigation menu items (font size is redefined later so that all text is rendered to the correct size)

Title Structure and Style

The first item inside the header area is our title area.

The construction of the title area is identical to our Accordion Navigation Menu design.

Let's start with the HTML used to create the title area for our responsive search and share bar design:

HTML
                    
<!-- Title -->



<div class="title">



  <div class="page title_container">



    <h1 class="title_heading">

      <a href="#home"

      class="title_heading_link">

        My Website</a></h1>



    <button type="button"

    onclick="navToggle()"

    class="title_button">

      <i class="title_button_icon fa fa-bars"></i></button>



  </div>



</div>

First, we create our title area 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 container using the <div> element and assign it:

  • The class="page title_container" attribute to control the layout of the title container

The first item inside the title container is our title heading. We create this item using the <h1> element and assign it:

  • The class="title_heading" attribute to control the style of the title heading

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 title container is the title button that opens and closes our accordion navigation menu on small screens. We create this item using the <button> element and assign it:

  • The onclick="navToggle()" attribute to execute the JavaScript function that opens and closes the accordion navigation menu when clicked
  • The class="title_button" attribute to control the layout and style of the title button

Inside the title button we create our title button icon using the <i> element and assign it:

  • The class="title_button_icon fa fa-bars" attribute to control the style of the title button icon

Next the CSS:

CSS
                    
/* Title */



.title {background: #4040BF;}



.title_container {

  position: relative;

  padding: 0 56px;

}



.title_heading {

  display: inline-block;

  font: bold 24px / 1.5 sans-serif;

}



.title_heading_link {

  display: block;

  padding: 16px;

  text-decoration: none;

  color: #FFFFFF;

}



.title_button {

  display: none;

  width: 56px;

  height: 68px;

  position: absolute;

  right: 0;

  top: 0;

  padding: 16px;

  font: 24px / 1.5 sans-serif;

  color: #FFFFFF;

  background: transparent;

  cursor: pointer;

}



.title_button_icon {width: 24px;}

First, we create the .title CSS rule to control the style of our title area.

Next we create the .title_container CSS rule to control the layout of our title container. We include:

  • The position: relative; property to allow the title button to be positioned relative to the title container
  • The padding: 0 56px; property to prevent the title heading and title button from overlapping

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 .title_button CSS rule to control the layout and style of our title button. We include:

  • The display: none; property to hide the title button on devices that are not JavaScript-enabled
  • The position: absolute; right: 0; top: 0; properties to position the title button in the top-right corner of the title container

Finally, we create the .title_button_icon CSS rule to control the style of our title button icon.

Function

To complete our search and share bar design, we use JavaScript to add functionality to our layout. Keeping aligned with the principle of "progressive enhancement", our search and share menus remain fully functional for visitors without JavaScript-enabled devices. But for visitors with JavaScript-enabled devices, the dropdown behavior is added to our search and share menus to provide an improved user experience.

To produce this functionality, we add the dropdown behavior on medium and large screens and initially close the search and share menus by setting their height to 0. We also show the buttons required to toggle the search and share menus.

When the button is clicked to open the search menu, its height is set equal to the height of its content and the share menu is closed. When the button is clicked to close the search menu, its height is set back to 0.

When the button is clicked to open the share menu, its height is set equal to the height of its content and the search menu is closed. When the button is clicked to close the share menu, its height is set back to 0.

Let's take a look at a step-by-step breakdown of how we want the JavaScript to function:

When the page is loaded or resized:

  • If screen size is small:
    • Add accordion behavior to navigation
    • Collapse navigation
    • Show navigation button
    • Remove dropdown behavior from all instances of subnavigation
    • Expand all instances of subnavigation
    • Hide subnavigation button for all instances of subnavigation
  • If screen size is medium or large:
    • Remove accordion behavior from navigation
    • Expand navigation
    • Hide navigation button
    • Add dropdown behavior to all instances of subnavigation
    • Collapse all instances of subnavigation
    • Show subnavigation button for all instances of subnavigation

When navigation is toggled:

  • If navigation is closed:
    • Expand navigation
  • If navigation is open:
    • Collapse navigation

When subnavigation is toggled:

  • If selected instance of subnavigation is closed:
    • Collapse all instances of subnavigation
    • Send all instances of subnavigation to back
    • Expand selected instance of subnavigation
    • Bring selected instance of subnavigation to front
  • If selected instance of subnavigation is open:
    • Collapse selected instance of subnavigation
    • Send selected instance of subnavigation to back

Now the JavaScript that makes it happen:

JavaScript
                    
var screenSize = window.matchMedia("(max-width: 479px)");



// Navigation Variables



var nav = document.getElementsByClassName("nav");

var navButton = document.getElementsByClassName("title_button");

var subnav = document.getElementsByClassName("nav-2");

var subnavButton = document.getElementsByClassName("nav-1_button");



// Initial Setup of Navigation



function navInitial() {

  // If Screen Size is Small

  if (screenSize.matches) {

    // Initial Setup of Navigation

    nav[0].classList.add("accordion");

    nav[0].style.height = "0";

    navButton[0].style.display = "block";

    // For All Instances of Subnavigation

    for (i = 0; i < subnav.length; i++) {

      // Initial Setup of Subnavigation

      subnav[i].classList.remove("dropdown");

      subnav[i].style.height = "auto";

      subnavButton[i].style.display = "none";

    }

  }

  // If Screen Size is Medium or Large

  else {

    // Initial Setup of Navigation

    nav[0].classList.remove("accordion");

    nav[0].style.height = "auto";

    navButton[0].style.display = "none";

    // For All Instances of Subnavigation

    for (i = 0; i < subnav.length; i++) {

      // Initial Setup of Subnavigation

      subnav[i].classList.add("dropdown");

      subnav[i].style.height = "0";

      subnavButton[i].style.display = "block";

    }

  }

}



// Toggle Navigation



function navToggle() {

  // If Navigation is Closed

  if (nav[0].style.height === "0px") {

    // Open Navigation

    nav[0].style.height = nav[0].scrollHeight + "px";

  }

  // If Navigation is Open

  else {

    // Close Navigation

    nav[0].style.height = "0";

  }

}



// Toggle Subnavigation



function subnavToggle(n) {

  // If Selected Instance of Subnavigation is Closed

  if (subnav[n].style.height === "0px") {

    // For All Instances of Subnavigation

    for (i = 0; i < subnav.length; i++) {

      // Close Subnavigation

      subnav[i].style.height = "0";

      subnav[i].style.zIndex = "0";

    }

    // Open Selected Instance of Subnavigation

    subnav[n].style.height = subnav[n].scrollHeight + "px";

    subnav[n].style.zIndex = "1";

  }

  // If Selected Instance of Subnavigation is Open

  else {

    // Close Selected Instance of Subnavigation

    subnav[n].style.height = "0";

    subnav[n].style.zIndex = "0";

  }

}



// When Page is Loaded

window.onload = navInitial;

// When Page is Resized

window.onresize = navInitial;

And there you have it! A responsive search and share bar.

The demonstration provided expands upon this code to show the header in a complete web page environment. It also includes extra features like tooltips, hover states, toggled icons, and button tabs.

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