Css Header Template

Jurgen 4 minutes to read

How to create a mobile first header template the modern way

Modern would be using grid and flex-box. Also not using javascript to move parts around, just plain css. Adding the same content twice to hide or show it on certain screen sizes is considered old-fashioned.

The header setup

What elements do we in general use in the header:

  1. the ubiquitous usp’s
  2. logo
  3. mobile menu icon (on mobile and/or tablet)
  4. search bar
  5. user menu
  6. main menu

So, let’s set up the parts in html.

The usp’s:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

<div class="header-top container">
    <ol class="usps flex-row">
        <li>
            <strong>Fast &amp; lightweight</strong>
        </li>
        <li>
            <strong>Fully responsive</strong>
        </li>
        <li>
            <strong>Accessible by default</strong>
        </li>
        <li>
            <strong>Developer friendly</strong>
        </li>
    </ol>
</div>

The usp’s are a simple ordered list in it’s own container so we can use a different background color, if needed.

Mobile menu icon and Logo section:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<details name="menu-toggle" class="btn-menu-icon">
    <summary aria-label="Toggle Hamburger Menu">
        <svg class="menu-icon" xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
    </summary>
</details>
<a class="logo" href="/">
    <svg width="10rem" height="2rem" xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 460 100">
        <path d="M0 0v100h50V82H18V0z" style="fill:#e85d4a;fill-rule:nonzero"/>
        <path d="M92 50c0-29 19-50 45-50s45 21 45 50-19 50-45 50-45-21-45-50m18 0c0-19 12-32 27-32s27 13 27 32-12 32-27 32-27-13-27-32" style="fill:#f5a623"/>
        <path d="M229 50c0-29 19-50 45-50 22 0 38 14 44 34l-18 4c-4-12-13-20-26-20-16 0-27 14-27 32s11 32 27 32c14 0 24-9 27-22h-24V44h42v56h-14l-2-10c-8 7-18 10-29 10-26 0-45-21-45-50" style="fill:#4a90d9;fill-rule:nonzero"/>
        <path d="M368 50c0-29 19-50 45-50s45 21 45 50-19 50-45 50-45-21-45-50m18 0c0-19 12-32 27-32s27 13 27 32-12 32-27 32-27-13-27-32" style="fill:#2ecc71"/>
    </svg>
</a>

The mobile menu icon is set in a details/summary element which gives interaction out of the box. The logo is a svg in a link tag, nothing special there…

Search bar:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<search>
    <form class="form search" action="#" method="get">
        <fieldset>
            <label class="sr-only" for="search" data-role="search-label">Search</label>
            <input id="search" type="search" autocomplete="off" name="q" value="" placeholder="Search.." maxlength="128" class="searchbar-header">
            <button type="submit" class="action search" aria-label="Search">
                <svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 24 24">
                    <path fill="currentColor" d="M9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l5.6 5.6q.275.275.275.7t-.275.7t-.7.275t-.7-.275l-5.6-5.6q-.75.6-1.725.95T9.5 16m0-2q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14"/>
                </svg>
            </button>
        </fieldset>
    </form>
</search>

For the search field the search html element is used around a basic form.

User menu:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<details class="utilities">
    <summary aria-label="Toggle User Menu">
        <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 15 15"><path fill="none" stroke="currentColor" stroke-linecap="square" d="M10.5 3.498a3 3 0 0 1-3 2.998a2.999 2.999 0 1 1 3-2.998Zm2 10.992h-10v-1.996a3 3 0 0 1 3-3h4a3 3 0 0 1 3 3z" clip-rule="evenodd"/></svg>
        <svg class="chevron" xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m17 10l-5 5l-5-5"/></svg>
    </summary>
    <nav class="nav-account flex-col" aria-label="Account">
        <a href="#">Sign In</a>
        <a href="#">Create Account</a>
    </nav>
</details>

The user menu is also set in a details/summary element with some links in a nav element

Main navigation:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<nav class="nav-menu flex-row" aria-label="Main menu">
    <details name="menu-toggle" class="btn-menu-close">
        <summary aria-label="Close Hamburger Menu">
            <svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 24 24"><path fill="currentColor" d="M20.48 3.512a11.97 11.97 0 0 0-8.486-3.514C5.366-.002-.007 5.371-.007 11.999c0 3.314 1.344 6.315 3.516 8.487A11.97 11.97 0 0 0 11.995 24c6.628 0 12.001-5.373 12.001-12.001c0-3.314-1.344-6.315-3.516-8.487m-1.542 15.427a9.8 9.8 0 0 1-6.943 2.876c-5.423 0-9.819-4.396-9.819-9.819a9.8 9.8 0 0 1 2.876-6.943a9.8 9.8 0 0 1 6.942-2.876c5.422 0 9.818 4.396 9.818 9.818a9.8 9.8 0 0 1-2.876 6.942z"/><path fill="currentColor" d="m13.537 12l3.855-3.855a1.091 1.091 0 0 0-1.542-1.541l.001-.001l-3.855 3.855l-3.855-3.855A1.091 1.091 0 0 0 6.6 8.145l-.001-.001l3.855 3.855l-3.855 3.855a1.091 1.091 0 1 0 1.541 1.542l.001-.001l3.855-3.855l3.855 3.855a1.091 1.091 0 1 0 1.542-1.541l-.001-.001z"/></svg>
        </summary>
    </details>
    <div class="nav-items">
        <a href="#">Home</a>
        <a href="#">Services</a>
        <a href="#">About</a>
        <a href="#">Blog</a>
        <a href="#">Contact</a>
    </div>
</nav>

The main navigation uses a nav element with the links grouped in a div, the close icon uses a details/summary element with the build in interaction.

And the header structure:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<header>
    <!-- usp's -->
    <div class="header-container container header-grid">
        <!-- mobile menu icon -->
        <!-- logo -->
        <!-- search -->
        <!-- user menu -->
        <!-- main menu -->
    </div>
</header>
<main class="main-content" aria-label="Content"></main>

All the header components are placed in the header-grid container directly. By using css grid every item gets its place. Below in the files is the complete html setup.

Direct links to the files: Html setup Html styled result