Header

A scaled back, mobile-responsive header you can integrate in under 30 seconds. use .header-sticky for a sticky header.

Code Example Shortcut: z-header-1

<header class="header-sticky">
<div class="pl-2" id="header-logo">
    <a href="../index.html"><img src="docs/images/logo.png" alt="brand logo"></a>
</div>
<div>
    <a id="hamburger-button-2"><img src="dist/img/icons/bars.svg" class="icon-header up-3" alt="Menu"></a>
</div>
<nav class="top-nav"> 
    <button id="close-button" aria-label="Close"><a class="close"></a></button>
    <ul>
    <li><a href="#" class="nav-link">Home</a></li>
    <li><a href="#" class="nav-link">Services</a></li>
    <li><a href="#" class="nav-link">Contact</a></li>
    </ul>
</nav>
</header>

Adding Sub-Navigation/Megamenu

To include subnavigation and/or megamenu, copy the code example below instead and include the js/modules/navigation.js file in your build, or right above the closing body tag.

Optional: To include the previous/next links (as shown below), uncomment out the function at the end of the navigation.js file.

This script allows you to build your navigation once and have it reproduced across all pages.

Code Example Shortcut: z-header-2

<header class="header-sticky">
    <div class="pl-2" id="header-logo">
        <img src="../../docs/images/logo.png" alt="zenCSS logo" />
    </div>
    <div id="nav-placeholder"></div>
</header>

The Zen Test

Every component, section, and utility we ship will pass layout, color, and functional tests to ensure they perform flawlessly in today's modern browsers.

So you can be assured it "just works". Try it out below.