July 7, 2026

Universal headers and footers.

Write the chrome once. Share it everywhere. Change a link in one place, and the whole site updates.

Christian Dunbar

4 min read

Copy-pasting the same nav and footer into every HTML page works until it does not. You add a phone number on the homepage and forget the contact page. You rename a menu item and half the site still shows the old one.

Universal headers and footers fix that. Keep one shared header and one shared footer, then load them on every page. The site feels consistent. Maintenance stays simple.

The simple idea

Put the header markup in one partial. Put the footer in another. Each page only owns its own content. The shared pieces come from those partials, often injected with a little raw JavaScript, or assembled when the page is served.

That is it. No redesign. No new framework. Just one source of truth for the edges of the page.

If the header lives in one file, the whole site can stay honest.

Code examples

Here is the pattern Pathline Web Studio expects: shared partials, a small include script, and placeholders on every page. Edit the chrome once. Ship the same edges everywhere.

1. File structure

your-site/
  index.html
  about.html
  contact.html
  css/
    styles.css
  js/
    includes.js
  partials/
    header.html
    footer.html

2. Header and footer partials

These are plain HTML fragments. No <html>, <head>, or <body> tags.

partials/header.html

<header class="site-header">
  <a class="site-logo" href="index.html">Acme Plumbing</a>
  <nav class="site-nav" aria-label="Primary">
    <button type="button" data-nav-toggle aria-label="Open menu">Menu</button>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
</header>

partials/footer.html

<footer class="site-footer">
  <p>&copy; 2026 Acme Plumbing</p>
  <p><a href="mailto:hi@example.com">hi@example.com</a></p>
</footer>

3. Placeholders on every page

Right after <body>, leave a slot for the header. Right before </body>, leave a slot for the footer and load the include script.

<body>
  <div data-include="partials/header.html"></div>

  <main>
    <!-- this page's content -->
  </main>

  <div data-include="partials/footer.html"></div>
  <script src="js/includes.js"></script>
</body>

4. The include script

Upload this as js/includes.js. It fetches each partial and injects it into the matching placeholder. The click listener keeps a mobile nav toggle working after the header loads asynchronously.

document.querySelectorAll('[data-include]').forEach(async (el) => {
  try {
    const res = await fetch(el.getAttribute('data-include'));
    el.innerHTML = await res.text();
  } catch (e) {
    /* Header/footer will not render from file://. Serve over http. */
  }
});

document.addEventListener('click', (e) => {
  const btn = e.target.closest('[data-nav-toggle]');
  if (!btn) return;
  const nav = btn.closest('nav') || document.querySelector('nav');
  if (nav) nav.classList.toggle('is-open');
});

fetch() needs the site served over http, which Pathline does in production. Locally, use a quick static server (for example npx serve) instead of opening the file directly.

Do it in Pathline Web Studio

Pathline Web Studio is built for people who want to ship real HTML and CSS, not fight a drag-and-drop builder. You can upload your raw JavaScript and partials there, keep your universal header and footer next to the rest of the site, and publish without a separate hosting chase.

Upload partials. Store the shared header and footer as files your pages can reuse.
Upload raw JavaScript. Use a small script to pull those partials into each page, or handle other shared behavior the same way.
Keep the site yours. Your markup. Your CSS. Pathline hosts it and keeps the leads next to your inbox.

When the nav changes, you edit the partial once. Every page that uses the universal header picks it up. Same story for the footer: contact details, hours, and links stay aligned because they are not duplicated by hand.

Why bother

Consistency builds trust. A site that looks like one company on every page feels more dependable than a patchwork of near-copies. Universal headers and footers are one of the cheapest ways to get there, especially when Web Studio lets you upload the partials and JavaScript yourself and keep shipping in plain code.