Nonprofit header

When to use it

The header for every page of a community food pantry site, which has two very different audiences: neighbors who need groceries and neighbors who want to give. It stays on one row — the name with a one-line purpose beneath it, Programs, Impact and About, and a single marigold Donate button — so it does not push the hero down on a phone, where most people looking for help will find you. Donate is the only filled element, which makes it easy to find without shouting. Replace the name and the line beneath it first, then point About at wherever your board and history live; in this kit that is the governance section of the impact page. If many visitors arrive looking for food rather than to donate, add a Get food link before Programs, or rename Programs to Get help — someone having a hard week should not have to guess which link is meant for them.

What it converts to

Converted with the Native components mode. The component list below is what this template produces — not a generic example.

• Container × 5
• HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
• Text Editor × 5
• Button × 1

Things worth knowing

• Donate has a marigold background and short text, so it converts to a Button widget; the name, the purpose line and the three navigation links arrive as five Text Editor widgets with their links kept, not as a Nav Menu.
• Put the converted block in an Elementor Theme Builder header template (Elementor Pro) so it appears on every page. Without Pro, paste it at the top of each page or keep the theme header.
• Below 780px the row stacks: the name and purpose line center above the links, which wrap beneath them. There is no hamburger menu, so keep the labels short.
• The link targets (/programs/, /impact/, /impact/#about, /donate/) are placeholders carried over from the HTML; change them to your real page URLs after import.

The HTML

This is the complete source. Copy it, or send it straight to the converter and adjust the options before exporting.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Nonprofit header</title>
  <style>
    body{margin:0;font-family:'Nunito Sans',Helvetica,Arial,sans-serif;color:#3b2346;background:#faf6ee}
    .bar{background:#faf6ee;border-bottom:1px solid #f6e3d6}
    .inner{max-width:1160px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}
    .brand{display:flex;flex-direction:column;gap:2px}
    .logo{margin:0;font-family:'Fraunces',Georgia,serif;font-size:24px;font-weight:700;line-height:1.2;color:#3b2346}
    .logo a{color:#3b2346;text-decoration:none}
    .tag{margin:0;font-size:13px;line-height:1.4;color:#6b5b70}
    .nav{display:flex;align-items:center;gap:28px}
    .link{color:#3b2346;text-decoration:none;font-size:16px;font-weight:700}
    .donate{display:inline-block;padding:11px 22px;border-radius:10px;background:#f2a93b;color:#3b2346;text-decoration:none;font-size:15px;font-weight:800}
    @media(max-width:780px){.inner{flex-direction:column;align-items:center;padding:14px 16px;gap:12px}.brand{align-items:center;text-align:center}.logo{font-size:21px}.nav{gap:18px;flex-wrap:wrap;justify-content:center}.link{font-size:15px}.donate{padding:9px 18px;font-size:14px}}
  </style>
</head>
<body>
  <header class="bar">
    <div class="inner">
      <div class="brand">
        <p class="logo"><a href="/">Bramwell Community Pantry</a></p>
        <p class="tag">Groceries for neighbors, run by neighbors</p>
      </div>
      <nav class="nav" aria-label="Main">
        <a class="link" href="/programs/">Programs</a>
        <a class="link" href="/impact/">Impact</a>
        <a class="link" href="/impact/#about">About</a>
        <a class="donate" href="/donate/">Donate</a>
      </nav>
    </div>
  </header>
</body>
</html>