How to Create a Responsive Website Header - Part 4

Web Development Post by Christopher Spicer
Responsive Website Header

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 with primary and secondary navigation menus that expand and collapse as needed. We'll use HTML, CSS, and JavaScript to construct a search and social media share bar. 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 Social Media Share Bar

In this example, we'll build upon our standard dropdown navigation menu design to include a search and social media share bar that expands and collapses as needed:

See Demo

A search and social media share bar provides visitors with an enhanced ability to find content and communicate it with a larger audience. When a visitor submits a search, all of the pages within our domain that contain the search terms are returned as standard search engine results. And when a visitor clicks on a social media share button, the current page of our website is automatically shared to the corresponding social media platform.

On small screens, the search and social media share bar is simply added to the end of the existing navigation menu.

On medium and large screens, the search and social media share bar behaves as a dropdown section. When a visitor selects either the search or social media share icon in the navigation menu, the dropdown section expands to show the corresponding content. When a visitor deselects either the search or social media share icon in the navigation menu, the dropdown section collapses.

Header Structure and Style

The construction of the header is similar to our standard dropdown navigation menu design. But we add:

  • CSS to allow the search and social media share bar dropdown behavior

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

HTML

<!-- Header --> <header> <!-- Title --> <div id="title"> ... </div> <!-- Navigation --> <nav id="nav"> ... </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 the title section

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 the navigation section

Next the CSS:

CSS

* { box-sizing: border-box; margin: 0; border: 0; padding: 0; } body {position: relative;} .page { max-width: 640px; margin: 0 auto; } @media (min-width: 960px) { .page {max-width: 960px;} }

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

Next we add a specific CSS rule to allow the search and social media share bar dropdown behavior. We use:

  • The position: relative property to ensure that the search and social media share bar is positioned relative to the body element

Title Structure and Style

The construction of the title section is identical to our standard dropdown navigation menu design.

Let's start with the HTML used to create the title section for our search and social media share bar design:

HTML

<!-- Title --> <div id="title"> <div class="page"> <div class="bar"> <h1 class="bar_item"> <a href="#home" class="bar_link"> My Website</a></h1> <p class="bar_control" id="nav_control"> <a href="javascript:void(0);" onclick="navToggle()" class="bar_link"> <i class="bar_icon fa fa-bars"></i></a></p> </div> </div> </div>

Inside the title 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 and assign it:

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

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

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

Inside the title heading we use the <a> element to create a 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="bar_link" attribute to control the style of the title heading link

The second item inside the title bar is our navigation button. We create this item using the <p> element and assign it:

  • The class="bar_control" attribute to control the style of the navigation button
  • The id="nav_control" attribute to allow the style of the navigation button to be controlled by JavaScript

Inside the navigation button we use the <a> element to create a link that opens and closes our dropdown navigation menu on small screens. We assign it:

  • The href="javascript:void(0);" attribute to void the destination of the navigation button link
  • The onclick="navToggle()" attribute to execute the JavaScript function that opens and closes the dropdown navigation menu when clicked
  • The class="bar_link" attribute to control the style of the navigation button link

And inside the navigation button link we create our navigation button icon using the <i> element and assign it:

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

Next the CSS:

CSS

/* Title */ #title {background: #4040BF;} #title .bar { position: relative; padding: 0 56px; font-size: 0; text-align: center; } #title .bar_item { display: inline-block; font: bold 24px / 1.5 sans-serif; } #title .bar_control { display: none; position: absolute; right: 0; top: 0; font: bold 24px / 1.5 sans-serif; } #title .bar_link { display: block; padding: 16px; text-decoration: none; color: #FFFFFF; } #title .bar_icon {width: 24px;}

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

First we create the #title CSS rule to apply a background color to our title section.

Next we create the .bar CSS rule to control the style of our title bar. We add:

  • The position: relative property to specify that the navigation button is positioned relative to the title bar
  • The padding: 0 56px property to prevent the title heading and navigation button from overlapping
  • The font-size: 0 property to prevent browsers from adding undesirable whitespace around the title heading and navigation button

Then we create the .bar_item CSS rule to control the style of our title heading.

Next we create the .bar_control CSS rule to control the style of our navigation button. We add:

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

Then we create the .bar_link CSS rule to control the style of our title bar links.

Finally we create the .bar_icon CSS rule to control the style of our navigation button icon.

Navigation Structure and Style

The construction of the navigation section is similar to our standard dropdown navigation menu design. But we add:

  • HTML to create the site menu subsection
  • HTML to create the search and social media share bar subsection

Let's start with the HTML used to create the navigation section for our search and social media share bar design:

HTML

<!-- Navigation --> <nav id="nav"> <!-- Site Menu --> <div id="nav-1"> ... </div> <!-- Search and Social Media Share Bar --> <div id="nav-2"> ... </div> </nav>

The navigation section is divided into two subsections.

The first subsection inside our navigation section contains the site menu for our website. We create this subsection using the <div> element and assign it:

  • The id="nav-1" attribute to define the CSS rules that apply uniquely to the site menu subsection

The second subsection inside our navigation section contains the search and social media share bar for our website. We create this subsection using the <div> element and assign it:

  • The id="nav-2" attribute to define the CSS rules that apply uniquely to the search and social media share bar subsection

Next the CSS:

CSS

/* Navigation */ #nav { overflow: hidden; transition: height 0.25s; }

Here we create the #nav CSS rule to allow the dropdown navigation menu behavior. We add:

  • The overflow: hidden property to hide the content of the dropdown navigation menu when it is collapsed
  • The transition: height 0.25s property to allow the height of the dropdown navigation menu to change smoothly over a 0.25-second duration

Site Menu Structure and Style

The construction of the site menu subsection is similar to the navigation section in our standard dropdown navigation menu design. But we add:

  • HTML and CSS to create the search and social media share icons
  • HTML to allow the search and social media share bar dropdown behavior

Let's start with the HTML used to create the site menu subsection for our search and social media share bar design:

HTML

<!-- Site Menu --> <div id="nav-1"> <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> <li class="bar_control" id="nav-share_control"> <a href="javascript:void(0);" onclick="navShareToggle()" class="bar_link"> <i class="bar_icon fa fa-share-alt"></i></a></li> <li class="bar_control" id="nav-search_control"> <a href="javascript:void(0);" onclick="navSearchToggle()" class="bar_link"> <i class="bar_icon fa fa-search"></i></a></li> </ul> </div> </div>

Inside the site menu subsection 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 site menu using the <ul> element and assign it:

  • The class="bar" attribute to control the style of the site menu

The first four items inside the site menu are our site menu items. We create these items using the <li> element and assign each:

  • The class="bar_item" attribute to control the style of the site menu item

Inside each site menu item we use the <a> element to create a link that directs visitors to the corresponding page when clicked. We assign each:

  • The href="..." attribute to specify the destination of the site menu link
  • The class="bar_link" attribute to control the style of the site menu link

The fifth item inside the site menu is our social media share bar button. We create this item using the <li> element and assign it:

  • The class="bar_control" attribute to control the style of the social media share bar button
  • The id="nav-share_control" attribute to allow the style of the social media share bar button to be controlled by JavaScript

Inside the social media share bar button we use the <a> element to create a link that opens and closes our social media share bar on large screens. We assign it:

  • The href="javascript:void(0);" attribute to void the destination of the social media share bar button link
  • The onclick="navShareToggle()" attribute to execute the JavaScript function that opens and closes the social media share bar when clicked
  • The class="bar_link" attribute to control the style of the social media share bar button link

And inside the social media share bar button link we create our social media share bar button icon using the <i> element and assign it:

  • The class="bar_icon fa fa-share-alt" attribute to control the style of the social media share bar button icon

The sixth item inside the site menu is our search bar button. We create this item using the <li> element and assign it:

  • The class="bar_control" attribute to control the style of the search bar button
  • The id="nav-search_control" attribute to allow the style of the search bar button to be controlled by JavaScript

Inside the search bar button we use the <a> element to create a link that opens and closes our search bar on large screens. We assign it:

  • The href="javascript:void(0);" attribute to void the destination of the search bar button link
  • The onclick="navSearchToggle()" attribute to execute the JavaScript function that opens and closes the search bar when clicked
  • The class="bar_link" attribute to control the style of the search bar button link

And inside the search bar button link we create our search bar button icon using the <i> element and assign it:

  • The class="bar_icon fa fa-search" attribute to control the style of the search bar button icon

Next the CSS:

CSS

/* Site Menu */ #nav-1 { background: #000000; } #nav-1 .bar { font-size: 0; text-align: center; overflow: hidden; } #nav-1 .bar_item { display: block; font: 16px / 1.5 sans-serif; } #nav-1 .bar_control { display: none; font: 16px / 1.5 sans-serif; } #nav-1 .bar_link { display: block; padding: 16px; text-decoration: none; color: #FFFFFF; } #nav-1 .bar_icon {width: 16px;} @media (min-width: 480px) { #nav-1 .bar_item { display: inline-block; float: left; } #nav-1 .bar_control {float: right;} }

Here we create a set of CSS rules to style the site menu subsection of our header. Each rule is preceded by the #nav-1 selector.

First we create the #nav-1 CSS rule to apply a background color to our site menu subsection.

Next we create the .bar CSS rule to control the style of our site menu. We add:

  • The font-size: 0 property to prevent browsers from adding undesirable whitespace around and between the site menu items
  • The overflow: hidden property to allow site menu items to be floated without collapsing the height of the site menu

Then we create the .bar_item CSS rule to control the style of our site menu items. Note that the site menu items are displayed vertically (as blocks) on small screens and horizontally (as inline-blocks) on medium and large screens. Also note that the site menu items are floated to the left on medium and large screens.

Next we create the .bar_control CSS rule to control the style of our search and social media share bar buttons. We add:

  • The display: none property to hide the search and social media share bar buttons on devices that are not JavaScript-enabled

Note that the search and social media share bar buttons are floated to the right on medium and large screens.

Then we create the .bar_link CSS rule to control the style of our site menu links.

Finally we create the .bar_icon CSS rule to control the style of our search and social media share bar button icons.

Search and Social Media Share Bar Structure and Style

The construction of the search and social media share bar subsection is similar to the navigation section in our standard dropdown navigation menu design. But we add:

  • HTML and CSS to create the search form
  • HTML and CSS to create the social media share icons
  • CSS to allow the search and social media share bar dropdown behavior

Let's start with the HTML used to create the search and social media share bar subsection for our search and social media share bar design:

HTML

<!-- Search and Social Media Share Bar --> <div id="nav-2"> <div class="page" id="nav-search"> <form action="http://www.google.com/search" target="_blank" method="get" class="form"> <div class="form_content"> <input type="hidden" name="sitesearch" value="www.mysite.com"> <input type="text" name="q" placeholder="Search..." class="form_input"> <button type="submit" class="form_button"> <i class="form_icon fa fa-search"></i></button> </div> </form> </div> <div class="page" id="nav-share"> <ul class="bar"> <li class="bar_item"> <a href="http://www.facebook.com/sharer.php?u=http://www.mysite.com" target="_blank" class="bar_link"> <i class="bar_icon fa fa-facebook-square"></i></a></li> <li class="bar_item"> <a href="https://twitter.com/share?url=http://www.mysite.com" target="_blank" class="bar_link"> <i class="bar_icon fa fa-twitter-square"></i></a></li> <li class="bar_item"> <a href="https://pinterest.com/pin/create/button/?url=http://www.mysite.com" target="_blank" class="bar_link"> <i class="bar_icon fa fa-pinterest-square"></i></a></li> <li class="bar_item"> <a href="https://plus.google.com/share?url=http://www.mysite.com" target="_blank" class="bar_link"> <i class="bar_icon fa fa-google-plus-square"></i></a></li> </ul> </div> </div>

The first item inside the search and social media share bar subsection is the page container for our search bar. We create this item using the <div> element and assign it:

  • The class="page" attribute to control the width of the search bar page container
  • The id="nav-search" attribute to allow the style of the search bar page container to be controlled by JavaScript

Inside the search bar page container we create the outer container for our search bar using the <form> element and assign it:

  • The action="http://www.google.com/search" attribute to specify the destination of the search engine
  • The target="_blank" attribute to open the search results in a new window or tab
  • The class="form" attribute to control the style of the search bar outer container

Inside the search bar outer container we create the inner container for our search bar using the <div> element and assign it:

  • The class="form_content" attribute to control the style of the search bar inner container

The first item inside the search bar inner container is a hidden input field that directs search engines to search only within our website domain. We create this item using the <input> element and assign it:

  • The type="hidden" attribute to hide the input field
  • The value="www.mysite.com" attribute to specify the domain of our website

The second item inside the search bar inner container is our search bar input field. We create this item using the <input> element and assign it:

  • The type="text" attribute to specify the type of input expected in the field
  • The class="form_input" attribute to control the style of the search bar input field

The third item inside the search bar inner container is our search bar button. We create this item using the <button> element and assign it:

  • The type="submit" attribute to specify the type of behavior executed by the search bar button
  • The class="form_button" to control the style of the search bar button

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

  • The class="form_icon fa fa-search" attribute to control the style of the search bar button icon

The second item inside the search and social media share bar subsection is the page container for our social media share bar. We create this item using the <div> element and assign it:

  • The class="page" attribute to control the width of the social media share bar page container
  • The id="nav-share" attribute to allow the style of the social media share bar page container to be controlled by JavaScript

Inside the social media share bar page container we create our social media share bar using the <ul> element and assign it:

  • The class="bar" attribute to control the style of the social media share bar

Inside the social media share bar we create our social media share bar items using the <li> element and assign each:

  • The class="bar_item" attribute to control the style of the social media share bar item

And inside each social media share bar item we use the <a> element to create a link that shares our page to the corresponding social media platform when clicked. We assign each:

  • The href="..." attribute to specify the destination of the social media share bar link
  • The class="bar_link" attribute to control the style of the social media share bar link

Next the CSS:

CSS

/* Search and Social Media Share Bar */ #nav-2 { background: #808080; overflow: hidden; transition: height 0.25s; } #nav-2.enabled { width: 100%; height: 0; position: absolute; } #nav-2 .bar { font-size: 0; text-align: center; } #nav-2 .bar_item { display: inline-block; font: 32px / 1.25 sans-serif; } #nav-2 .bar_link { display: block; padding: 8px 16px; text-decoration: none; color: #FFFFFF; } #nav-2 .bar_icon {width: 32px;} #nav-2 .form {padding: 8px 16px;} #nav-2 .form_content {position: relative;} #nav-2 .form_input { width: 100%; height: 40px; border-radius: 8px; padding: 8px 48px 8px 16px; font: 16px / 1.5 sans-serif; color: #404040; background: #FFFFFF; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) inset; } #nav-2 .form_button { height: 40px; position: absolute; right: 0; top: 0; padding: 8px 16px; font: 16px / 1.5 sans-serif; text-align: center; color: #000000; background: transparent; cursor: pointer; } #nav-2 .form_icon {width: 16px;}

Here we create a set of CSS rules to style the search and social media share bar subsection of our header. Each rule is preceded by the #nav-2 selector.

First we create the #nav-2 CSS rule to apply a background color to our search and social media share bar subsection. To allow the dropdown behavior we add:

  • The overflow: hidden property to hide the content of the search and social media share bar when it is collapsed
  • The transition: height 0.25s property to allow the height of the search and social media share bar to change smoothly over a 0.25-second duration

To modify the dropdown behavior for medium and large screens we add the .enabled selector to this rule that will be added and removed by JavaScript. When added, this selector applies:

  • The width: 100% property to specify that the search and social media share bar expands the full width of the screen
  • The height: 0 property to specify that the search and social media share bar is initially collapsed
  • The position: absolute property to position the search and social media share bar

Next we create the .bar CSS rule to control the style of our social media share bar. We add:

  • The font-size: 0 property to prevent browsers from adding undesirable whitespace around and between the social media share bar items

Then we create the .bar_item CSS rule to control the style of our social media share bar items.

Next we create the .bar_link CSS rule to control the style of our social media share bar links.

Then we create the .form CSS rule to control the style of our search bar outer container.

Next we create the .form_content CSS rule to control the style of our search bar inner container. We add:

  • The position: relative property to specify that the search bar button is positioned relative to the search bar inner container

Then we create the .form_input CSS rule to control the style of our search bar input field. We add:

  • The padding: 8px 48px 8px 16px property to prevent the search bar input field text and search bar button from overlapping

Next we create the .form_button CSS rule to control the style of our search bar button. We add:

  • The position: absolute, the right: 0, and the top: 0 properties to position the search bar button in the top-right corner of the search bar inner container

Finally we create the .form_icon CSS rule to control the style of our search bar button icon.

Function

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

To produce this functionality, we initially collapse the search and social media share bar on medium and large screens by setting its height to 0. We also reveal the buttons required to toggle the content inside the search and social media share bar.

When the button is clicked to expand the search bar, the search bar is shown, the social media share bar is hidden, and the dropdown section is expanded by setting its height equal to the height of its content. When the button is clicked to collapse the search bar, the search bar is hidden and the dropdown section is collapsed by recalculating the height of its content (hidden content has a height of 0).

When the button is clicked to expand the social media share bar, the social media share bar is shown, the search bar is hidden, and the dropdown section is expanded by setting its height equal to the height of its content. When the button is clicked to collapse the social media share bar, the social media share bar is hidden and the dropdown section is collapsed by recalculating the height of its content (hidden content has a height of 0).

On small screens, we remove the overlay behavior that enables the search and social media share bar to partially cover the main content area. On medium and large screens, we add the overlay behavior that enables the search and social media share bar to partially cover the main content area.

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 device size is medium or large:
    • Expand navigation
    • Hide "Open Menu / Close Menu" control
    • Declare navigation is open
    • Enable search and social media share bar section overlay behavior
    • Collapse search and social media share bar section
    • Hide search bar
    • Show "Open Search / Close Search" control
    • Declare search bar is closed
    • Hide social media share bar
    • Show "Open Share / Close Share" control
    • Declare social media share bar is closed
  • If device size is small:
    • Collapse navigation
    • Show "Open Menu / Close Menu" control
    • Declare navigation is closed
    • Disable search and social media share bar section overlay behavior
    • Expand search and social media share bar section
    • Show search bar
    • Hide "Open Search / Close Search" control
    • Declare search bar is open
    • Show social media share bar
    • Hide "Open Share / Close Share" control
    • Declare social media share bar is open

When navigation is toggled:

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

When search bar is toggled:

  • Hide social media share bar
  • Declare social media share bar is closed
  • If search bar is closed:
    • Show search bar
    • Declare search bar is open
  • If search bar is open:
    • Hide search bar
    • Declare search bar is closed
  • Expand/collapse search and social media share bar section

When social media share bar is toggled:

  • Hide search bar
  • Declare search bar is closed
  • If social media share bar is closed:
    • Show social media share bar
    • Declare social media share bar is open
  • If social media share bar is open:
    • Hide social media share bar
    • Declare social media share bar is closed
  • Expand/collapse search and social media share bar section

Now the JavaScript that makes it happen:

JavaScript

var screenSize = window.matchMedia("(min-width: 480px)"); var nav = document.getElementById("nav"); var navControl = document.getElementById("nav_control"); var navState; var nav2 = document.getElementById("nav-2"); var navSearch = document.getElementById("nav-search"); var navSearchControl = document.getElementById("nav-search_control"); var navSearchState; var navShare = document.getElementById("nav-share"); var navShareControl = document.getElementById("nav-share_control"); var navShareState; function navInitial() { if (screenSize.matches) { nav.style.height = "auto"; navControl.style.display = "none"; navState = 1; nav2.classList.add("enabled"); nav2.style.height = "0"; navSearch.style.display = "none"; navSearchControl.style.display = "inline-block"; navSearchState = 0; navShare.style.display = "none"; navShareControl.style.display = "inline-block"; navShareState = 0; } else { nav.style.height = "0"; navControl.style.display = "inline-block"; navState = 0; nav2.classList.remove("enabled"); nav2.style.height = "auto"; navSearch.style.display = "block"; navSearchControl.style.display = "none"; navSearchState = 1; navShare.style.display = "block"; navShareControl.style.display = "none"; navShareState = 1; } } function navToggle() { if (navState === 0) { nav.style.height = nav.scrollHeight + "px"; navState = 1; } else { nav.style.height = "0"; navState = 0; } } function navSearchToggle() { navShare.style.display = "none"; navShareState = 0; if (navSearchState === 0) { navSearch.style.display = "block"; navSearchState = 1; } else { navSearch.style.display = "none"; navSearchState = 0; } nav2.style.height = navSearch.scrollHeight + "px"; } function navShareToggle() { navSearch.style.display = "none"; navSearchState = 0; if (navShareState === 0) { navShare.style.display = "block"; navShareState = 1; } else { navShare.style.display = "none"; navShareState = 0; } nav2.style.height = navShare.scrollHeight + "px"; } window.onload = navInitial; window.onresize = navInitial;

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

The demonstration provided expands upon this code to include toggled icons, colors, and tooltips.

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