FIELDCRAFT DOCS
HTML template · v1.3.0

Components

Header

The topbar strip, sticky primary nav, logo, and mobile nav overlay — present on every page except the standalone Coming Soon and Home page hero variants.

Topbar strip

A thin announcement bar (.topbar) sits above the main header on every page, carrying a one-line message and a click-to-call phone link.

<div class="topbar">
  <span>NIGHT LINE STAFFED &mdash; MEDIAN DOOR-TIME 47 MIN</span>
  <a class="tb-phone" href="tel:+12165550181"><b>(216) 555-0181</b></a>
</div>

.sitehead is the sticky, blurred header itself: the .logo wordmark on the left, primary navigation links in the middle, and a phone link plus mobile menu toggle on the right. Use aria-current="page" on the current page's nav link.

<header class="sitehead">
  <a class="logo" href="index.html">Ironhouse<em>.</em></a>
  <nav aria-label="Primary">
    <a class="navlink" href="services.html" aria-current="page">Trades</a>
    <a class="navlink" href="about.html">About</a>
    <a class="navlink" href="gallery.html">Job Files</a>
    <a class="navlink" href="reviews.html">Reviews</a>
    <a class="navlink" href="contact.html">Contact</a>
    <a class="phone" href="tel:+12165550181">(216) 555-0181</a>
    <button class="menu-btn" aria-expanded="false" aria-controls="navmenu">Menu</button>
  </nav>
</header>

Below 860px (see Responsive), the inline nav links hide and .menu-btn becomes visible. It opens .navmenu, a full-screen overlay with its own large-type link list and a close button.

<div class="navmenu" id="navmenu" role="dialog" aria-modal="true" aria-label="Site menu" hidden>
  <div class="navmenu-top">
    <a class="logo" href="index.html">Ironhouse<em>.</em></a>
    <button class="navmenu-close" aria-label="Close menu">&times;</button>
  </div>
  <ul>
    <li><a href="services.html">Trades</a></li>
    <li><a href="about.html">About</a></li>
    <li><a class="phone" href="tel:+12165550181">(216) 555-0181</a></li>
  </ul>
</div>

Javascript

The mobile nav overlay is driven by src/js/main.js: opening it traps keyboard focus inside the overlay (Tab/Shift+Tab cycle only through its own links and the close button), locks page scroll, and returns focus to the button that opened it on close. Escape and clicking any link inside the overlay both close it. Without JavaScript, .menu-btn simply has no click handler attached — it's marked display: none at desktop widths regardless, and at narrow widths the primary nav links (not the overlay) remain the fallback navigation.

← PreviousComponentsNext →Hero