Design patterns · Section 01 of 14

Headers & navigation

Ten site headers: logo, navigation, donate actions and a mobile menu that works without extra JavaScript. Click View code under any design to see its HTML, or Copy HTML to paste it into a page.

Headers & navigation · Design 01

Classic with contact bar

The standard site header: an ink contact bar on large screens, logo left, links centred and donate actions right, with a full-width drop-down menu on mobile. Add sticky top-0 to keep it in view.

info@zafarfoundation.org.uk 07940 040010

Registered charity 1215863, England and Wales

Give Zakat DonateDonate now

<header class="border-b border-line bg-white">
  <div class="hidden bg-ink text-white lg:block">
    <div class="mx-auto w-full max-w-content px-5 sm:px-8 flex h-10 items-center justify-between font-display text-[13px]">
      <div class="flex items-center gap-7">
        <a href="mailto:info@zafarfoundation.org.uk" class="inline-flex items-center gap-2 text-white/85 transition-colors hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="text-marigold"><path d="M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48Zm-96,85.15L52.57,64H203.43ZM98.71,128,40,181.81V74.19Zm11.84,10.85,12,11.05a8,8,0,0,0,10.82,0l12-11.05,58,53.15H52.57ZM157.29,128,216,74.18V181.82Z"></path></svg>info@zafarfoundation.org.uk</a>
        <a href="tel:+447940040010" class="inline-flex items-center gap-2 text-white/85 transition-colors hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="text-marigold"><path d="M222.37,158.46l-47.11-21.11-.13-.06a16,16,0,0,0-15.17,1.4,8.12,8.12,0,0,0-.75.56L134.87,160c-15.42-7.49-31.34-23.29-38.83-38.51l20.78-24.71c.2-.25.39-.5.57-.77a16,16,0,0,0,1.32-15.06l0-.12L97.54,33.64a16,16,0,0,0-16.62-9.52A56.26,56.26,0,0,0,32,80c0,79.4,64.6,144,144,144a56.26,56.26,0,0,0,55.88-48.92A16,16,0,0,0,222.37,158.46ZM176,208A128.14,128.14,0,0,1,48,80,40.2,40.2,0,0,1,82.87,40a.61.61,0,0,0,0,.12l21,47L83.2,111.86a6.13,6.13,0,0,0-.57.77,16,16,0,0,0-1,15.7c9.06,18.53,27.73,37.06,46.46,46.11a16,16,0,0,0,15.75-1.14,8.44,8.44,0,0,0,.74-.56L168.89,152l47,21.05h0s.08,0,.11,0A40.21,40.21,0,0,1,176,208Z"></path></svg>07940 040010</a>
      </div>
      <p class="text-white/85">Registered charity <span class="font-semibold text-white">1215863</span>, England and Wales</p>
    </div>
  </div>
  <div class="relative">
    <div class="mx-auto w-full max-w-content px-5 sm:px-8 flex h-16 items-center justify-between gap-3 lg:h-[72px]">
      <div class="lg:flex-1">
        <a class="inline-flex items-center gap-2.5 rounded-sm" aria-label="Zafar Foundation home" href="index.html"><img src="images/logo.svg" alt="Zafar Foundation" width="521" height="80" class="h-9 sm:h-10 w-auto"></a>
      </div>
      <nav aria-label="Header 1 navigation" class="hidden lg:block">
        <ul class="flex items-center gap-7 xl:gap-9">
          <li><a class="t-label rounded-sm py-2 text-ink transition-colors hover:text-water" href="about.html">About</a></li>
          <li><a class="t-label rounded-sm py-2 text-ink transition-colors hover:text-water" href="causes.html">Our causes</a></li>
          <li><a class="t-label rounded-sm py-2 text-ink transition-colors hover:text-water" href="impact.html">Impact</a></li>
          <li><a class="t-label rounded-sm py-2 text-ink transition-colors hover:text-water" href="get-involved.html">Get involved</a></li>
          <li><a class="t-label rounded-sm py-2 text-ink transition-colors hover:text-water" href="contact.html">Contact</a></li>
        </ul>
      </nav>
      <div class="flex items-center justify-end gap-5 pr-14 lg:flex-1 lg:pr-0">
        <a class="t-label hidden rounded-sm py-2 text-ink transition-colors hover:text-water xl:inline-block" href="donate.html?fund=zakat">Give Zakat</a>
        <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px bg-marigold text-ink hover:bg-marigold-deep h-10 px-4 text-[15px]" href="donate.html"><span class="sm:hidden">Donate</span><span class="hidden sm:inline">Donate now</span></a>
      </div>
    </div>
    <details class="group/m lg:hidden">
      <summary class="absolute right-5 top-2.5 grid size-11 place-items-center rounded-md border border-line-strong text-ink sm:right-8 cursor-pointer list-none [&::-webkit-details-marker]:hidden"><span class="sr-only">Navigation</span><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="group-open/m:hidden"><path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="hidden group-open/m:block"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg></summary>
      <nav aria-label="Header 1 mobile navigation" class="border-t border-line">
        <div class="mx-auto w-full max-w-content px-5 sm:px-8 pb-8">
          <ul class="divide-y divide-line border-b border-line">
            <li><a class="flex items-center justify-between py-4 font-display text-[20px] font-semibold text-ink hover:text-water" href="about.html">About<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="text-line-strong"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path></svg></a></li>
            <li><a class="flex items-center justify-between py-4 font-display text-[20px] font-semibold text-ink hover:text-water" href="causes.html">Our causes<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="text-line-strong"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path></svg></a></li>
            <li><a class="flex items-center justify-between py-4 font-display text-[20px] font-semibold text-ink hover:text-water" href="impact.html">Impact<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="text-line-strong"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path></svg></a></li>
            <li><a class="flex items-center justify-between py-4 font-display text-[20px] font-semibold text-ink hover:text-water" href="get-involved.html">Get involved<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="text-line-strong"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path></svg></a></li>
            <li><a class="flex items-center justify-between py-4 font-display text-[20px] font-semibold text-ink hover:text-water" href="contact.html">Contact<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="text-line-strong"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path></svg></a></li>
          </ul>
          <div class="mt-6 grid gap-3 sm:grid-cols-2">
            <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px bg-marigold text-ink hover:bg-marigold-deep h-12 px-6 text-base" href="donate.html">Donate now</a>
            <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px border border-ink text-ink hover:bg-smoke h-12 px-6 text-base" href="donate.html?fund=zakat">Give Zakat</a>
          </div>
          <div class="mt-6 grid gap-2 font-display text-[15px] sm:flex sm:gap-6">
            <a href="mailto:info@zafarfoundation.org.uk" class="inline-flex items-center gap-2 text-ink hover:text-water"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="text-water"><path d="M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48Zm-96,85.15L52.57,64H203.43ZM98.71,128,40,181.81V74.19Zm11.84,10.85,12,11.05a8,8,0,0,0,10.82,0l12-11.05,58,53.15H52.57ZM157.29,128,216,74.18V181.82Z"></path></svg>info@zafarfoundation.org.uk</a>
            <a href="tel:+447940040010" class="inline-flex items-center gap-2 text-ink hover:text-water"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="text-water"><path d="M222.37,158.46l-47.11-21.11-.13-.06a16,16,0,0,0-15.17,1.4,8.12,8.12,0,0,0-.75.56L134.87,160c-15.42-7.49-31.34-23.29-38.83-38.51l20.78-24.71c.2-.25.39-.5.57-.77a16,16,0,0,0,1.32-15.06l0-.12L97.54,33.64a16,16,0,0,0-16.62-9.52A56.26,56.26,0,0,0,32,80c0,79.4,64.6,144,144,144a56.26,56.26,0,0,0,55.88-48.92A16,16,0,0,0,222.37,158.46ZM176,208A128.14,128.14,0,0,1,48,80,40.2,40.2,0,0,1,82.87,40a.61.61,0,0,0,0,.12l21,47L83.2,111.86a6.13,6.13,0,0,0-.57.77,16,16,0,0,0-1,15.7c9.06,18.53,27.73,37.06,46.46,46.11a16,16,0,0,0,15.75-1.14,8.44,8.44,0,0,0,.74-.56L168.89,152l47,21.05h0s.08,0,.11,0A40.21,40.21,0,0,1,176,208Z"></path></svg>07940 040010</a>
          </div>
          <p class="t-caption mt-4 text-slate">Registered charity 1215863, England and Wales</p>
        </div>
      </nav>
    </details>
  </div>
</header>

Headers & navigation · Design 02

Centred logo split nav

A stacked logo sits in the centre with three links on the left and the rest beside the donate button; on mobile the menu button moves to the left.

DonateDonate now

<header class="border-b border-line bg-white">
  <div class="relative">
    <div class="mx-auto w-full max-w-content px-5 sm:px-8 grid h-[76px] grid-cols-[1fr_auto_1fr] items-center gap-3 lg:h-24 lg:gap-8">
      <nav aria-label="Header 2 navigation" class="hidden lg:block">
        <ul class="flex items-center gap-7 xl:gap-9">
          <li><a class="t-label rounded-sm py-2 text-ink transition-colors hover:text-water" href="about.html">About</a></li>
          <li><a class="t-label rounded-sm py-2 text-ink transition-colors hover:text-water" href="causes.html">Our causes</a></li>
          <li><a class="t-label rounded-sm py-2 text-ink transition-colors hover:text-water" href="impact.html">Impact</a></li>
        </ul>
      </nav>
      <span class="lg:hidden" aria-hidden="true"></span>
      <a class="flex flex-col items-center gap-1.5 rounded-sm text-center" aria-label="Zafar Foundation home" href="index.html"><img src="images/logo.svg" alt="Zafar Foundation" width="521" height="80" class="h-8 lg:h-11 w-auto"></a>
      <div class="flex items-center justify-end gap-7 xl:gap-9">
        <ul class="hidden items-center gap-7 lg:flex xl:gap-9">
          <li><a class="t-label rounded-sm py-2 text-ink transition-colors hover:text-water" href="get-involved.html">Get involved</a></li>
          <li><a class="t-label rounded-sm py-2 text-ink transition-colors hover:text-water" href="contact.html">Contact</a></li>
        </ul>
        <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px bg-marigold text-ink hover:bg-marigold-deep h-10 px-4 text-[15px]" href="donate.html"><span class="sm:hidden">Donate</span><span class="hidden sm:inline">Donate now</span></a>
      </div>
    </div>
    <details class="group/m lg:hidden">
      <summary class="absolute left-5 top-4 grid size-11 place-items-center rounded-full bg-smoke text-ink sm:left-8 cursor-pointer list-none [&::-webkit-details-marker]:hidden"><span class="sr-only">Navigation</span><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="group-open/m:hidden"><path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="hidden group-open/m:block"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg></summary>
      <nav aria-label="Header 2 mobile navigation" class="border-t border-line bg-white">
        <div class="mx-auto w-full max-w-content px-5 sm:px-8 py-6">
          <ul class="grid grid-cols-2 gap-2">
            <li><a class="flex h-full items-center rounded-md bg-smoke px-4 py-3.5 font-display text-[17px] font-semibold text-ink hover:bg-water-tint hover:text-water" href="about.html">About</a></li>
            <li><a class="flex h-full items-center rounded-md bg-smoke px-4 py-3.5 font-display text-[17px] font-semibold text-ink hover:bg-water-tint hover:text-water" href="causes.html">Our causes</a></li>
            <li><a class="flex h-full items-center rounded-md bg-smoke px-4 py-3.5 font-display text-[17px] font-semibold text-ink hover:bg-water-tint hover:text-water" href="impact.html">Impact</a></li>
            <li><a class="flex h-full items-center rounded-md bg-smoke px-4 py-3.5 font-display text-[17px] font-semibold text-ink hover:bg-water-tint hover:text-water" href="get-involved.html">Get involved</a></li>
            <li><a class="flex h-full items-center rounded-md bg-smoke px-4 py-3.5 font-display text-[17px] font-semibold text-ink hover:bg-water-tint hover:text-water" href="contact.html">Contact</a></li>
            <li><a class="flex h-full items-center rounded-md bg-water-tint px-4 py-3.5 font-display text-[17px] font-semibold text-water hover:bg-mist" href="donate.html?fund=zakat">Give Zakat</a></li>
          </ul>
          <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px bg-marigold text-ink hover:bg-marigold-deep h-12 px-6 text-base mt-4 w-full" href="donate.html">Donate now</a>
          <p class="t-caption mt-5 text-center text-slate">Registered charity 1215863, England and Wales</p>
        </div>
      </nav>
    </details>
  </div>
</header>

Headers & navigation · Design 03

Dark ink bar

An ink header with a marigold top edge, marigold logo mark and links grouped on the right beside an outline Zakat button; the mobile menu opens as numbered links on dark.

Give Zakat DonateDonate now

<header class="border-t-4 border-marigold bg-ink text-white">
  <div class="relative">
    <div class="mx-auto w-full max-w-content px-5 sm:px-8 flex h-16 items-center justify-between gap-3 lg:h-20">
      <a class="inline-flex items-center gap-2.5 rounded-sm" aria-label="Zafar Foundation home" href="index.html"><img src="images/logo-white.svg" alt="Zafar Foundation" width="521" height="80" class="h-9 sm:h-10 w-auto"></a>
      <div class="flex items-center gap-6 xl:gap-10">
        <nav aria-label="Header 3 navigation" class="hidden lg:block">
          <ul class="flex items-center gap-6 xl:gap-8">
            <li><a class="t-label rounded-sm py-2 text-white/80 decoration-marigold decoration-2 underline-offset-[10px] transition-colors hover:text-white hover:underline" href="about.html">About</a></li>
            <li><a class="t-label rounded-sm py-2 text-white/80 decoration-marigold decoration-2 underline-offset-[10px] transition-colors hover:text-white hover:underline" href="causes.html">Our causes</a></li>
            <li><a class="t-label rounded-sm py-2 text-white/80 decoration-marigold decoration-2 underline-offset-[10px] transition-colors hover:text-white hover:underline" href="impact.html">Impact</a></li>
            <li><a class="t-label rounded-sm py-2 text-white/80 decoration-marigold decoration-2 underline-offset-[10px] transition-colors hover:text-white hover:underline" href="get-involved.html">Get involved</a></li>
            <li><a class="t-label rounded-sm py-2 text-white/80 decoration-marigold decoration-2 underline-offset-[10px] transition-colors hover:text-white hover:underline" href="contact.html">Contact</a></li>
          </ul>
        </nav>
        <div class="flex items-center gap-3 pr-14 lg:pr-0">
          <a class="items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px border border-white/70 text-white hover:border-white hover:bg-white/10 h-10 px-4 text-[15px] hidden sm:inline-flex" href="donate.html?fund=zakat">Give Zakat</a>
          <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px bg-marigold text-ink hover:bg-marigold-deep h-10 px-4 text-[15px]" href="donate.html"><span class="sm:hidden">Donate</span><span class="hidden sm:inline">Donate now</span></a>
        </div>
      </div>
    </div>
    <details class="group/m lg:hidden">
      <summary class="absolute right-5 top-2.5 grid size-11 place-items-center rounded-md border border-white/40 text-white hover:border-white sm:right-8 cursor-pointer list-none [&::-webkit-details-marker]:hidden"><span class="sr-only">Navigation</span><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="group-open/m:hidden"><path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="hidden group-open/m:block"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg></summary>
      <nav aria-label="Header 3 mobile navigation" class="border-t border-white/15">
        <div class="mx-auto w-full max-w-content px-5 sm:px-8 pb-8 pt-4">
          <ul class="grid">
            <li><a class="flex items-baseline gap-4 border-b border-white/10 py-4 font-display text-[20px] font-semibold text-white hover:text-marigold" href="about.html"><span class="font-display text-[13px] font-semibold text-marigold">01</span>About</a></li>
            <li><a class="flex items-baseline gap-4 border-b border-white/10 py-4 font-display text-[20px] font-semibold text-white hover:text-marigold" href="causes.html"><span class="font-display text-[13px] font-semibold text-marigold">02</span>Our causes</a></li>
            <li><a class="flex items-baseline gap-4 border-b border-white/10 py-4 font-display text-[20px] font-semibold text-white hover:text-marigold" href="impact.html"><span class="font-display text-[13px] font-semibold text-marigold">03</span>Impact</a></li>
            <li><a class="flex items-baseline gap-4 border-b border-white/10 py-4 font-display text-[20px] font-semibold text-white hover:text-marigold" href="get-involved.html"><span class="font-display text-[13px] font-semibold text-marigold">04</span>Get involved</a></li>
            <li><a class="flex items-baseline gap-4 border-b border-white/10 py-4 font-display text-[20px] font-semibold text-white hover:text-marigold" href="contact.html"><span class="font-display text-[13px] font-semibold text-marigold">05</span>Contact</a></li>
          </ul>
          <div class="mt-6 grid gap-3 sm:grid-cols-2">
            <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px bg-marigold text-ink hover:bg-marigold-deep h-12 px-6 text-base" href="donate.html">Donate now</a>
            <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px border border-white/70 text-white hover:border-white hover:bg-white/10 h-12 px-6 text-base" href="donate.html?fund=zakat">Give Zakat</a>
          </div>
          <p class="t-caption mt-6 flex flex-wrap gap-x-4 gap-y-1 text-on-dark-muted"><span>Registered charity 1215863, England and Wales</span><a class="link-on-dark" href="tel:+447940040010">07940 040010</a></p>
        </div>
      </nav>
    </details>
  </div>
</header>

Headers & navigation · Design 04

Transparent over photo

A see-through header with white text, made to sit on top of a hero photo (shown here over a photo strip); place it absolute inset-x-0 top-0 over your hero.

Farmers loading harvested wheat onto horse-drawn carts in a sunlit field

Give Zakat DonateDonate now

<div class="relative isolate overflow-hidden bg-ink">
  <img src="images/wheat-harvest.jpg" srcset="images/webp/wheat-harvest-640.webp 640w, images/webp/wheat-harvest-1080.webp 1080w" sizes="100vw" alt="Farmers loading harvested wheat onto horse-drawn carts in a sunlit field" loading="lazy" decoding="async" class="absolute inset-0 -z-20 h-full w-full object-cover" style="object-position: 50% 60%">
  <div aria-hidden="true" class="absolute inset-0 -z-10 bg-linear-to-b from-ink/90 via-ink/50 to-ink/20"></div>
  <header class="relative text-white">
    <div class="mx-auto w-full max-w-content px-5 sm:px-8 flex h-20 items-center justify-between gap-3 border-b border-white/20 lg:h-24">
      <a class="inline-flex items-center gap-2.5 rounded-sm" aria-label="Zafar Foundation home" href="index.html"><img src="images/logo-white.svg" alt="Zafar Foundation" width="521" height="80" class="h-9 sm:h-10 w-auto"></a>
      <nav aria-label="Header 4 navigation" class="hidden lg:block">
        <ul class="flex items-center gap-7 xl:gap-9">
          <li><a class="t-label rounded-sm py-2 text-white/85 transition-colors hover:text-white" href="about.html">About</a></li>
          <li><a class="t-label rounded-sm py-2 text-white/85 transition-colors hover:text-white" href="causes.html">Our causes</a></li>
          <li><a class="t-label rounded-sm py-2 text-white/85 transition-colors hover:text-white" href="impact.html">Impact</a></li>
          <li><a class="t-label rounded-sm py-2 text-white/85 transition-colors hover:text-white" href="get-involved.html">Get involved</a></li>
          <li><a class="t-label rounded-sm py-2 text-white/85 transition-colors hover:text-white" href="contact.html">Contact</a></li>
        </ul>
      </nav>
      <div class="flex items-center gap-3 pr-14 lg:pr-0">
        <a class="t-label hidden rounded-sm py-2 text-white/85 underline decoration-white/40 underline-offset-4 hover:text-white hover:decoration-white xl:inline-block" href="donate.html?fund=zakat">Give Zakat</a>
        <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px bg-marigold text-ink hover:bg-marigold-deep h-10 px-4 text-[15px] xl:ml-3" href="donate.html"><span class="sm:hidden">Donate</span><span class="hidden sm:inline">Donate now</span></a>
      </div>
    </div>
    <details class="group/m lg:hidden">
      <summary class="absolute right-5 top-[18px] grid size-11 place-items-center rounded-full border border-white/50 bg-ink/30 text-white hover:border-white sm:right-8 cursor-pointer list-none [&::-webkit-details-marker]:hidden"><span class="sr-only">Navigation</span><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="group-open/m:hidden"><path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="hidden group-open/m:block"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg></summary>
      <div class="mx-auto w-full max-w-content px-5 sm:px-8 pt-3">
        <nav aria-label="Header 4 mobile navigation" class="rounded-xl bg-ink/95 p-5 ring-1 ring-white/15 sm:p-6">
          <ul class="grid gap-1">
            <li><a class="block rounded-md px-3 py-2.5 font-display text-[19px] font-semibold text-white hover:bg-white/10" href="about.html">About</a></li>
            <li><a class="block rounded-md px-3 py-2.5 font-display text-[19px] font-semibold text-white hover:bg-white/10" href="causes.html">Our causes</a></li>
            <li><a class="block rounded-md px-3 py-2.5 font-display text-[19px] font-semibold text-white hover:bg-white/10" href="impact.html">Impact</a></li>
            <li><a class="block rounded-md px-3 py-2.5 font-display text-[19px] font-semibold text-white hover:bg-white/10" href="get-involved.html">Get involved</a></li>
            <li><a class="block rounded-md px-3 py-2.5 font-display text-[19px] font-semibold text-white hover:bg-white/10" href="contact.html">Contact</a></li>
          </ul>
          <div class="mt-5 grid gap-3 border-t border-white/15 pt-5 sm:grid-cols-2">
            <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px bg-marigold text-ink hover:bg-marigold-deep h-12 px-6 text-base" href="donate.html">Donate now</a>
            <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px border border-white/70 text-white hover:border-white hover:bg-white/10 h-12 px-6 text-base" href="donate.html?fund=zakat">Give Zakat</a>
          </div>
        </nav>
      </div>
    </details>
  </header>
  <div aria-hidden="true" class="h-40 sm:h-56 lg:h-64"></div>
</div>

Headers & navigation · Design 05

Masthead with nav strip

Two tiers: a white masthead with the logo, email and phone, and a full-width teal strip carrying the links and quick giving options.

Email usinfo@zafarfoundation.org.uk Call us07940 040010 Donate now

DonateDonate now

Give monthly Give Zakat Charity 1215863

<header class="bg-white">
  <div class="relative border-b border-line lg:border-b-0">
    <div class="mx-auto w-full max-w-content px-5 sm:px-8 flex h-16 items-center justify-between gap-3 lg:h-24 lg:gap-6">
      <a class="inline-flex items-center gap-2.5 rounded-sm" aria-label="Zafar Foundation home" href="index.html"><img src="images/logo.svg" alt="Zafar Foundation" width="521" height="80" class="h-9 sm:h-10 w-auto"></a>
      <div class="hidden items-center gap-8 lg:flex">
        <a href="mailto:info@zafarfoundation.org.uk" class="group flex items-center gap-3 rounded-sm"><span class="grid size-10 shrink-0 place-items-center rounded-full bg-water-tint text-water"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48Zm-96,85.15L52.57,64H203.43ZM98.71,128,40,181.81V74.19Zm11.84,10.85,12,11.05a8,8,0,0,0,10.82,0l12-11.05,58,53.15H52.57ZM157.29,128,216,74.18V181.82Z"></path></svg></span><span><span class="t-caption block text-slate">Email us</span><span class="block font-display text-[15px] font-semibold leading-snug text-ink group-hover:text-water">info@zafarfoundation.org.uk</span></span></a>
        <a href="tel:+447940040010" class="group flex items-center gap-3 rounded-sm"><span class="grid size-10 shrink-0 place-items-center rounded-full bg-water-tint text-water"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M222.37,158.46l-47.11-21.11-.13-.06a16,16,0,0,0-15.17,1.4,8.12,8.12,0,0,0-.75.56L134.87,160c-15.42-7.49-31.34-23.29-38.83-38.51l20.78-24.71c.2-.25.39-.5.57-.77a16,16,0,0,0,1.32-15.06l0-.12L97.54,33.64a16,16,0,0,0-16.62-9.52A56.26,56.26,0,0,0,32,80c0,79.4,64.6,144,144,144a56.26,56.26,0,0,0,55.88-48.92A16,16,0,0,0,222.37,158.46ZM176,208A128.14,128.14,0,0,1,48,80,40.2,40.2,0,0,1,82.87,40a.61.61,0,0,0,0,.12l21,47L83.2,111.86a6.13,6.13,0,0,0-.57.77,16,16,0,0,0-1,15.7c9.06,18.53,27.73,37.06,46.46,46.11a16,16,0,0,0,15.75-1.14,8.44,8.44,0,0,0,.74-.56L168.89,152l47,21.05h0s.08,0,.11,0A40.21,40.21,0,0,1,176,208Z"></path></svg></span><span><span class="t-caption block text-slate">Call us</span><span class="block font-display text-[15px] font-semibold leading-snug text-ink group-hover:text-water">07940 040010</span></span></a>
        <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px bg-marigold text-ink hover:bg-marigold-deep h-12 px-6 text-base" href="donate.html">Donate now</a>
      </div>
      <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px bg-marigold text-ink hover:bg-marigold-deep h-10 px-4 text-[15px] mr-14 lg:hidden" href="donate.html"><span class="sm:hidden">Donate</span><span class="hidden sm:inline">Donate now</span></a>
    </div>
    <details class="group/m lg:hidden">
      <summary class="absolute right-5 top-2.5 grid size-11 place-items-center rounded-md bg-water text-white hover:bg-water-deep sm:right-8 cursor-pointer list-none [&::-webkit-details-marker]:hidden"><span class="sr-only">Navigation</span><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="group-open/m:hidden"><path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="hidden group-open/m:block"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg></summary>
      <nav aria-label="Header 5 mobile navigation" class="bg-water text-white">
        <div class="mx-auto w-full max-w-content px-5 sm:px-8 pb-8 pt-3">
          <ul class="divide-y divide-white/15">
            <li><a class="block py-3.5 font-display text-[19px] font-semibold text-white hover:text-marigold" href="about.html">About</a></li>
            <li><a class="block py-3.5 font-display text-[19px] font-semibold text-white hover:text-marigold" href="causes.html">Our causes</a></li>
            <li><a class="block py-3.5 font-display text-[19px] font-semibold text-white hover:text-marigold" href="impact.html">Impact</a></li>
            <li><a class="block py-3.5 font-display text-[19px] font-semibold text-white hover:text-marigold" href="get-involved.html">Get involved</a></li>
            <li><a class="block py-3.5 font-display text-[19px] font-semibold text-white hover:text-marigold" href="contact.html">Contact</a></li>
          </ul>
          <div class="mt-5 grid gap-3 rounded-lg bg-water-deep p-4 font-display text-[15px]">
            <a href="mailto:info@zafarfoundation.org.uk" class="inline-flex items-center gap-2.5 text-white hover:underline"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="text-marigold"><path d="M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48Zm-96,85.15L52.57,64H203.43ZM98.71,128,40,181.81V74.19Zm11.84,10.85,12,11.05a8,8,0,0,0,10.82,0l12-11.05,58,53.15H52.57ZM157.29,128,216,74.18V181.82Z"></path></svg>info@zafarfoundation.org.uk</a>
            <a href="tel:+447940040010" class="inline-flex items-center gap-2.5 text-white hover:underline"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="text-marigold"><path d="M222.37,158.46l-47.11-21.11-.13-.06a16,16,0,0,0-15.17,1.4,8.12,8.12,0,0,0-.75.56L134.87,160c-15.42-7.49-31.34-23.29-38.83-38.51l20.78-24.71c.2-.25.39-.5.57-.77a16,16,0,0,0,1.32-15.06l0-.12L97.54,33.64a16,16,0,0,0-16.62-9.52A56.26,56.26,0,0,0,32,80c0,79.4,64.6,144,144,144a56.26,56.26,0,0,0,55.88-48.92A16,16,0,0,0,222.37,158.46ZM176,208A128.14,128.14,0,0,1,48,80,40.2,40.2,0,0,1,82.87,40a.61.61,0,0,0,0,.12l21,47L83.2,111.86a6.13,6.13,0,0,0-.57.77,16,16,0,0,0-1,15.7c9.06,18.53,27.73,37.06,46.46,46.11a16,16,0,0,0,15.75-1.14,8.44,8.44,0,0,0,.74-.56L168.89,152l47,21.05h0s.08,0,.11,0A40.21,40.21,0,0,1,176,208Z"></path></svg>07940 040010</a>
          </div>
          <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px bg-marigold text-ink hover:bg-marigold-deep h-12 px-6 text-base mt-5 w-full" href="donate.html">Donate now</a>
        </div>
      </nav>
    </details>
  </div>
  <div class="hidden bg-water text-white lg:block">
    <div class="mx-auto w-full max-w-content px-5 sm:px-8 flex h-14 items-center justify-between gap-6">
      <nav aria-label="Header 5 navigation">
        <ul class="-ml-4 flex items-center">
          <li><a class="block rounded-sm px-4 py-2 font-display text-[15px] font-medium text-white/90 transition-colors hover:bg-water-deep hover:text-white" href="about.html">About</a></li>
          <li><a class="block rounded-sm px-4 py-2 font-display text-[15px] font-medium text-white/90 transition-colors hover:bg-water-deep hover:text-white" href="causes.html">Our causes</a></li>
          <li><a class="block rounded-sm px-4 py-2 font-display text-[15px] font-medium text-white/90 transition-colors hover:bg-water-deep hover:text-white" href="impact.html">Impact</a></li>
          <li><a class="block rounded-sm px-4 py-2 font-display text-[15px] font-medium text-white/90 transition-colors hover:bg-water-deep hover:text-white" href="get-involved.html">Get involved</a></li>
          <li><a class="block rounded-sm px-4 py-2 font-display text-[15px] font-medium text-white/90 transition-colors hover:bg-water-deep hover:text-white" href="contact.html">Contact</a></li>
        </ul>
      </nav>
      <div class="flex items-center gap-6 font-display text-[14px]">
        <a class="text-white/90 underline decoration-white/40 underline-offset-4 hover:text-white hover:decoration-white" href="donate.html?frequency=monthly">Give monthly</a>
        <a class="text-white/90 underline decoration-white/40 underline-offset-4 hover:text-white hover:decoration-white" href="donate.html?fund=zakat">Give Zakat</a>
        <span class="rounded-full bg-water-deep px-3 py-1 text-[13px] text-white">Charity 1215863</span>
      </div>
    </div>
  </div>
</header>

Headers & navigation · Design 06

Minimal menu button

Just the logo, a donate button and a Menu button at every screen size; the menu opens a large panel with big links, giving options and contact details.

Donate now

Ways to give

Get in touch

info@zafarfoundation.org.uk 07940 040010 94 Glen Road, Sheffield,
S7 1RB, United Kingdom

Donate now

<header class="border-b border-line bg-white">
  <div class="relative">
    <div class="mx-auto w-full max-w-content px-5 sm:px-8 flex h-16 items-center justify-between gap-4 lg:h-20">
      <a class="inline-flex items-center gap-2.5 rounded-sm" aria-label="Zafar Foundation home" href="index.html"><img src="images/logo.svg" alt="Zafar Foundation" width="521" height="80" class="h-9 sm:h-10 w-auto"></a>
      <a class="items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px bg-marigold text-ink hover:bg-marigold-deep h-10 px-4 text-[15px] mr-[108px] hidden sm:inline-flex" href="donate.html">Donate now</a>
    </div>
    <details class="group/m">
      <summary class="absolute right-5 top-3 inline-flex h-10 w-[96px] xl:right-[calc((100%_-_80rem)/2_+_2rem)] cursor-pointer list-none items-center justify-center gap-2 rounded-full border border-ink font-display text-[15px] font-semibold text-ink transition-colors hover:bg-smoke sm:right-8 lg:top-5 [&::-webkit-details-marker]:hidden"><span class="group-open/m:hidden">Menu</span><span class="hidden group-open/m:inline">Close</span><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="group-open/m:hidden"><path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="hidden group-open/m:block"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg></summary>
      <div class="border-t border-line bg-smoke">
        <div class="mx-auto w-full max-w-content px-5 sm:px-8 grid gap-10 py-10 lg:grid-cols-12 lg:gap-8 lg:py-14">
          <nav aria-label="Header 6 navigation" class="lg:col-span-6">
            <ul class="grid gap-1">
              <li><a class="group flex items-baseline gap-4 py-1 font-display text-[30px] font-bold leading-tight tracking-[-0.015em] text-ink transition-colors hover:text-water sm:text-[40px]" href="about.html"><span class="w-7 shrink-0 font-display text-[13px] font-semibold tracking-normal text-slate group-hover:text-water">01</span>About</a></li>
              <li><a class="group flex items-baseline gap-4 py-1 font-display text-[30px] font-bold leading-tight tracking-[-0.015em] text-ink transition-colors hover:text-water sm:text-[40px]" href="causes.html"><span class="w-7 shrink-0 font-display text-[13px] font-semibold tracking-normal text-slate group-hover:text-water">02</span>Our causes</a></li>
              <li><a class="group flex items-baseline gap-4 py-1 font-display text-[30px] font-bold leading-tight tracking-[-0.015em] text-ink transition-colors hover:text-water sm:text-[40px]" href="impact.html"><span class="w-7 shrink-0 font-display text-[13px] font-semibold tracking-normal text-slate group-hover:text-water">03</span>Impact</a></li>
              <li><a class="group flex items-baseline gap-4 py-1 font-display text-[30px] font-bold leading-tight tracking-[-0.015em] text-ink transition-colors hover:text-water sm:text-[40px]" href="get-involved.html"><span class="w-7 shrink-0 font-display text-[13px] font-semibold tracking-normal text-slate group-hover:text-water">04</span>Get involved</a></li>
              <li><a class="group flex items-baseline gap-4 py-1 font-display text-[30px] font-bold leading-tight tracking-[-0.015em] text-ink transition-colors hover:text-water sm:text-[40px]" href="contact.html"><span class="w-7 shrink-0 font-display text-[13px] font-semibold tracking-normal text-slate group-hover:text-water">05</span>Contact</a></li>
            </ul>
          </nav>
          <div class="grid gap-10 sm:grid-cols-2 lg:col-span-6 lg:gap-8">
            <div>
              <p class="t-caption font-semibold uppercase tracking-[0.08em] text-slate">Ways to give</p>
              <ul class="mt-4 grid gap-1 font-display text-[16px]">
                <li><a class="inline-block py-1 text-ink hover:text-water" href="donate.html?frequency=monthly">Give monthly</a></li>
                <li><a class="inline-block py-1 text-ink hover:text-water" href="donate.html?fund=zakat">Give Zakat</a></li>
                <li><a class="inline-block py-1 text-ink hover:text-water" href="donate.html?fund=sadaqah">Give Sadaqah</a></li>
                <li><a class="inline-block py-1 text-ink hover:text-water" href="donate.html#zakat-calculator">Zakat calculator</a></li>
                <li><a class="inline-block py-1 text-ink hover:text-water" href="donate.html#gift-aid">Gift Aid</a></li>
              </ul>
            </div>
            <div>
              <p class="t-caption font-semibold uppercase tracking-[0.08em] text-slate">Get in touch</p>
              <address class="mt-4 grid gap-2 font-display text-[16px] not-italic">
                <a class="link w-fit" href="mailto:info@zafarfoundation.org.uk">info@zafarfoundation.org.uk</a>
                <a class="link w-fit" href="tel:+447940040010">07940 040010</a>
                <span class="mt-2 text-[15px] leading-relaxed text-slate">94 Glen Road, Sheffield,<br>S7 1RB, United Kingdom</span>
              </address>
              <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px bg-marigold text-ink hover:bg-marigold-deep h-12 px-6 text-base mt-6 sm:hidden" href="donate.html">Donate now</a>
            </div>
          </div>
        </div>
      </div>
    </details>
  </div>
</header>

Headers & navigation · Design 07

Floating pill nav

A rounded white pill with a soft shadow floating on a smoke background, with pill-shaped hover states and a rounded donate button; the mobile menu opens as a card below the pill.

DonateDonate now

<header class="bg-smoke px-3 py-3 sm:px-6 sm:py-5">
  <div class="relative mx-auto w-full max-w-content">
    <div class="flex h-16 items-center justify-between gap-2 rounded-full bg-white pl-3 pr-2.5 shadow-[var(--shadow-card)] ring-1 ring-line sm:pl-6">
      <a class="inline-flex items-center gap-2.5 rounded-sm" aria-label="Zafar Foundation home" href="index.html"><img src="images/logo.svg" alt="Zafar Foundation" width="521" height="80" class="h-9 sm:h-10 w-auto"></a>
      <nav aria-label="Header 7 navigation" class="hidden lg:block">
        <ul class="flex items-center gap-1">
          <li><a class="t-label block rounded-full px-4 py-2.5 text-ink transition-colors hover:bg-smoke hover:text-water" href="about.html">About</a></li>
          <li><a class="t-label block rounded-full px-4 py-2.5 text-ink transition-colors hover:bg-smoke hover:text-water" href="causes.html">Our causes</a></li>
          <li><a class="t-label block rounded-full px-4 py-2.5 text-ink transition-colors hover:bg-smoke hover:text-water" href="impact.html">Impact</a></li>
          <li><a class="t-label block rounded-full px-4 py-2.5 text-ink transition-colors hover:bg-smoke hover:text-water" href="get-involved.html">Get involved</a></li>
          <li><a class="t-label block rounded-full px-4 py-2.5 text-ink transition-colors hover:bg-smoke hover:text-water" href="contact.html">Contact</a></li>
        </ul>
      </nav>
      <a class="inline-flex items-center justify-center gap-2 rounded-full font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px bg-marigold text-ink hover:bg-marigold-deep h-10 px-4 text-[15px] mr-[50px] lg:mr-0 lg:h-11 lg:px-5" href="donate.html"><span class="sm:hidden">Donate</span><span class="hidden sm:inline">Donate now</span></a>
    </div>
    <details class="group/m lg:hidden">
      <summary class="absolute right-2.5 top-2.5 grid size-11 place-items-center rounded-full bg-smoke text-ink hover:bg-mist cursor-pointer list-none [&::-webkit-details-marker]:hidden"><span class="sr-only">Navigation</span><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="group-open/m:hidden"><path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="hidden group-open/m:block"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg></summary>
      <nav aria-label="Header 7 mobile navigation" class="mt-3 rounded-2xl bg-white p-3 shadow-[var(--shadow-card)] ring-1 ring-line sm:p-4">
        <ul class="grid gap-0.5">
          <li><a class="flex items-center justify-between rounded-xl px-4 py-3 font-display text-[18px] font-semibold text-ink hover:bg-smoke hover:text-water" href="about.html">About<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="text-line-strong"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></li>
          <li><a class="flex items-center justify-between rounded-xl px-4 py-3 font-display text-[18px] font-semibold text-ink hover:bg-smoke hover:text-water" href="causes.html">Our causes<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="text-line-strong"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></li>
          <li><a class="flex items-center justify-between rounded-xl px-4 py-3 font-display text-[18px] font-semibold text-ink hover:bg-smoke hover:text-water" href="impact.html">Impact<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="text-line-strong"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></li>
          <li><a class="flex items-center justify-between rounded-xl px-4 py-3 font-display text-[18px] font-semibold text-ink hover:bg-smoke hover:text-water" href="get-involved.html">Get involved<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="text-line-strong"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></li>
          <li><a class="flex items-center justify-between rounded-xl px-4 py-3 font-display text-[18px] font-semibold text-ink hover:bg-smoke hover:text-water" href="contact.html">Contact<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="text-line-strong"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></li>
        </ul>
        <div class="mt-2 grid gap-2 border-t border-line px-1 pt-4 sm:grid-cols-2">
          <a class="inline-flex items-center justify-center gap-2 rounded-full font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px bg-marigold text-ink hover:bg-marigold-deep h-12 px-6 text-base" href="donate.html">Donate now</a>
          <a class="inline-flex items-center justify-center gap-2 rounded-full font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px border border-ink text-ink hover:bg-smoke h-12 px-6 text-base" href="donate.html?frequency=monthly">Give monthly</a>
        </div>
      </nav>
    </details>
  </div>
</header>

Headers & navigation · Design 08

Appeal banner above nav

A marigold banner for the current appeal runs above a white bar with the links grouped beside the logo; the mobile menu ends with an appeal card.

Current appeal: essential support for families in Pakistan

Give to the appeal

07940 040010 DonateDonate now

<header class="bg-white">
  <div class="bg-marigold text-ink">
    <div class="mx-auto w-full max-w-content px-5 sm:px-8 flex flex-col gap-1 py-2.5 sm:flex-row sm:items-center sm:justify-center sm:gap-4">
      <p class="font-display text-[14px] leading-snug"><span class="font-bold">Current appeal:</span> essential support for families in Pakistan</p>
      <a class="inline-flex w-fit items-center gap-1.5 rounded-sm font-display text-[14px] font-semibold underline underline-offset-4 hover:no-underline" href="donate.html?fund=current-appeal">Give to the appeal<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a>
    </div>
  </div>
  <div class="relative border-b border-line">
    <div class="mx-auto w-full max-w-content px-5 sm:px-8 flex h-16 items-center justify-between gap-3 lg:h-[76px] lg:gap-6">
      <div class="flex items-center gap-10 xl:gap-14">
        <a class="inline-flex items-center gap-2.5 rounded-sm" aria-label="Zafar Foundation home" href="index.html"><img src="images/logo.svg" alt="Zafar Foundation" width="521" height="80" class="h-9 sm:h-10 w-auto"></a>
        <nav aria-label="Header 8 navigation" class="hidden lg:block">
          <ul class="flex items-center gap-7">
            <li><a class="t-label rounded-sm py-2 text-slate transition-colors hover:text-ink" href="about.html">About</a></li>
            <li><a class="t-label rounded-sm py-2 text-slate transition-colors hover:text-ink" href="causes.html">Our causes</a></li>
            <li><a class="t-label rounded-sm py-2 text-slate transition-colors hover:text-ink" href="impact.html">Impact</a></li>
            <li><a class="t-label rounded-sm py-2 text-slate transition-colors hover:text-ink" href="get-involved.html">Get involved</a></li>
            <li><a class="t-label rounded-sm py-2 text-slate transition-colors hover:text-ink" href="contact.html">Contact</a></li>
          </ul>
        </nav>
      </div>
      <div class="flex items-center gap-5 pr-14 lg:pr-0">
        <a class="t-label hidden items-center gap-2 rounded-sm text-ink hover:text-water xl:inline-flex" href="tel:+447940040010"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="text-water"><path d="M222.37,158.46l-47.11-21.11-.13-.06a16,16,0,0,0-15.17,1.4,8.12,8.12,0,0,0-.75.56L134.87,160c-15.42-7.49-31.34-23.29-38.83-38.51l20.78-24.71c.2-.25.39-.5.57-.77a16,16,0,0,0,1.32-15.06l0-.12L97.54,33.64a16,16,0,0,0-16.62-9.52A56.26,56.26,0,0,0,32,80c0,79.4,64.6,144,144,144a56.26,56.26,0,0,0,55.88-48.92A16,16,0,0,0,222.37,158.46ZM176,208A128.14,128.14,0,0,1,48,80,40.2,40.2,0,0,1,82.87,40a.61.61,0,0,0,0,.12l21,47L83.2,111.86a6.13,6.13,0,0,0-.57.77,16,16,0,0,0-1,15.7c9.06,18.53,27.73,37.06,46.46,46.11a16,16,0,0,0,15.75-1.14,8.44,8.44,0,0,0,.74-.56L168.89,152l47,21.05h0s.08,0,.11,0A40.21,40.21,0,0,1,176,208Z"></path></svg>07940 040010</a>
        <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px bg-ink text-white hover:bg-water-deep h-10 px-4 text-[15px]" href="donate.html"><span class="sm:hidden">Donate</span><span class="hidden sm:inline">Donate now</span></a>
      </div>
    </div>
    <details class="group/m lg:hidden">
      <summary class="absolute right-5 top-2.5 grid size-11 place-items-center rounded-md border border-line-strong text-ink sm:right-8 cursor-pointer list-none [&::-webkit-details-marker]:hidden"><span class="sr-only">Navigation</span><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="group-open/m:hidden"><path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="hidden group-open/m:block"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg></summary>
      <nav aria-label="Header 8 mobile navigation" class="border-t border-line">
        <div class="mx-auto w-full max-w-content px-5 sm:px-8 pb-8 pt-2">
          <ul class="grid">
            <li><a class="block border-b border-line py-3.5 font-display text-[19px] font-semibold text-ink hover:text-water" href="about.html">About</a></li>
            <li><a class="block border-b border-line py-3.5 font-display text-[19px] font-semibold text-ink hover:text-water" href="causes.html">Our causes</a></li>
            <li><a class="block border-b border-line py-3.5 font-display text-[19px] font-semibold text-ink hover:text-water" href="impact.html">Impact</a></li>
            <li><a class="block border-b border-line py-3.5 font-display text-[19px] font-semibold text-ink hover:text-water" href="get-involved.html">Get involved</a></li>
            <li><a class="block border-b border-line py-3.5 font-display text-[19px] font-semibold text-ink hover:text-water" href="contact.html">Contact</a></li>
          </ul>
          <a href="donate.html?fund=current-appeal" class="mt-6 flex items-center gap-4 rounded-lg bg-smoke p-3 hover:bg-mist">
            <span class="size-20 shrink-0 overflow-hidden rounded-md"><img src="images/village-pump-shikarpur.jpg" srcset="images/webp/village-pump-shikarpur-640.webp 640w, images/webp/village-pump-shikarpur-1080.webp 1080w" sizes="80px" alt="" loading="lazy" decoding="async" class="h-full w-full object-cover"></span>
            <span class="min-w-0">
              <span class="t-caption block font-semibold uppercase tracking-[0.08em] text-water">Current appeal</span>
              <span class="mt-1 block font-display text-[16px] font-semibold leading-snug text-ink">Essential support for families in Pakistan</span>
            </span>
          </a>
          <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px bg-ink text-white hover:bg-water-deep h-12 px-6 text-base mt-4 w-full" href="donate.html">Donate now</a>
        </div>
      </nav>
    </details>
  </div>
</header>

Headers & navigation · Design 09

Causes mega menu

Our causes opens a wide drop-down (a details element, no JavaScript) with all five causes grouped by need, photo thumbnails and a featured appeal card that drops over the page; on mobile the causes nest inside the menu.

DonateDonate now

<header class="relative border-b border-line bg-white">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8 flex h-16 items-center justify-between gap-3 lg:h-[76px]">
    <a class="inline-flex items-center gap-2.5 rounded-sm" aria-label="Zafar Foundation home" href="index.html"><img src="images/logo.svg" alt="Zafar Foundation" width="521" height="80" class="h-9 sm:h-10 w-auto"></a>
    <nav aria-label="Header 9 navigation" class="hidden lg:block">
      <ul class="flex items-center gap-7 xl:gap-9">
        <li><a class="t-label rounded-sm py-2 text-ink transition-colors hover:text-water" href="about.html">About</a></li>
        <li>
          <details class="group/c">
            <summary class="t-label inline-flex cursor-pointer list-none items-center gap-1.5 rounded-sm py-2 text-ink transition-colors hover:text-water group-open/c:text-water [&::-webkit-details-marker]:hidden">Our causes<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="transition-transform group-open/c:rotate-180"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"></path></svg></summary>
            <div class="absolute inset-x-0 top-full z-30 border-y border-line bg-white shadow-[var(--shadow-card-hover)]">
              <div class="mx-auto w-full max-w-content px-5 sm:px-8 grid grid-cols-12 gap-8 py-8">
                <div class="col-span-4">
                  <p class="t-caption px-2.5 font-semibold uppercase tracking-[0.08em] text-slate">Immediate needs</p>
                  <ul class="mt-2 grid gap-1">
                    <li><a class="group flex items-center gap-4 rounded-lg p-2.5 transition-colors hover:bg-smoke" href="causes.html#food-distribution"><span class="size-14 shrink-0 overflow-hidden rounded-md"><img src="images/food-community-cooking.jpg" srcset="images/webp/food-community-cooking-640.webp 640w, images/webp/food-community-cooking-1080.webp 1080w" sizes="56px" alt="" loading="lazy" decoding="async" class="h-full w-full object-cover"></span><span class="min-w-0"><span class="block font-display text-[16px] font-semibold leading-tight text-ink group-hover:text-water">Food distribution</span><span class="mt-1 block text-[14px] leading-snug text-slate">Parcels with the staples a family cooks with every day.</span></span></a></li>
                    <li><a class="group flex items-center gap-4 rounded-lg p-2.5 transition-colors hover:bg-smoke" href="causes.html#medical-assistance"><span class="size-14 shrink-0 overflow-hidden rounded-md"><img src="images/medical-clinic-blood-pressure.jpg" srcset="images/webp/medical-clinic-blood-pressure-640.webp 640w, images/webp/medical-clinic-blood-pressure-1080.webp 1080w" sizes="56px" alt="" loading="lazy" decoding="async" class="h-full w-full object-cover"></span><span class="min-w-0"><span class="block font-display text-[16px] font-semibold leading-tight text-ink group-hover:text-water">Medical assistance</span><span class="mt-1 block text-[14px] leading-snug text-slate">Treatment costs, medicines and access to care.</span></span></a></li>
                    <li><a class="group flex items-center gap-4 rounded-lg p-2.5 transition-colors hover:bg-smoke" href="causes.html#emergency-relief"><span class="size-14 shrink-0 overflow-hidden rounded-md"><img src="images/crisis-flood-balochistan.jpg" srcset="images/webp/crisis-flood-balochistan-640.webp 640w, images/webp/crisis-flood-balochistan-1080.webp 1080w" sizes="56px" alt="" loading="lazy" decoding="async" class="h-full w-full object-cover"></span><span class="min-w-0"><span class="block font-display text-[16px] font-semibold leading-tight text-ink group-hover:text-water">Emergency relief</span><span class="mt-1 block text-[14px] leading-snug text-slate">Practical help when floods or sudden hardship strike.</span></span></a></li>
                  </ul>
                </div>
                <div class="col-span-4">
                  <p class="t-caption px-2.5 font-semibold uppercase tracking-[0.08em] text-slate">Lasting foundations</p>
                  <ul class="mt-2 grid gap-1">
                    <li><a class="group flex items-center gap-4 rounded-lg p-2.5 transition-colors hover:bg-smoke" href="causes.html#clean-water"><span class="size-14 shrink-0 overflow-hidden rounded-md"><img src="images/water-hand-pump-boy.jpg" srcset="images/webp/water-hand-pump-boy-640.webp 640w, images/webp/water-hand-pump-boy-1080.webp 1080w" sizes="56px" alt="" loading="lazy" decoding="async" class="h-full w-full object-cover"></span><span class="min-w-0"><span class="block font-display text-[16px] font-semibold leading-tight text-ink group-hover:text-water">Clean water</span><span class="mt-1 block text-[14px] leading-snug text-slate">Hand pumps giving households safe water close to home.</span></span></a></li>
                    <li><a class="group flex items-center gap-4 rounded-lg p-2.5 transition-colors hover:bg-smoke" href="causes.html#education"><span class="size-14 shrink-0 overflow-hidden rounded-md"><img src="images/education-classroom.jpg" srcset="images/webp/education-classroom-640.webp 640w, images/webp/education-classroom-1080.webp 1080w" sizes="56px" alt="" loading="lazy" decoding="async" class="h-full w-full object-cover"></span><span class="min-w-0"><span class="block font-display text-[16px] font-semibold leading-tight text-ink group-hover:text-water">Education</span><span class="mt-1 block text-[14px] leading-snug text-slate">Fees, uniforms, books and practical school costs.</span></span></a></li>
                  </ul>
                  <a class="link ml-2.5 mt-4 font-display text-[15px] font-semibold" href="causes.html">See all our causes</a>
                </div>
                <a href="donate.html?fund=current-appeal" class="group col-span-4 flex flex-col overflow-hidden rounded-xl bg-ink text-white">
                  <span class="block aspect-[16/9] overflow-hidden"><img src="images/village-pump-shikarpur.jpg" srcset="images/webp/village-pump-shikarpur-640.webp 640w, images/webp/village-pump-shikarpur-1080.webp 1080w" sizes="(min-width: 1280px) 400px, 30vw" alt="Women and a child drawing water from a hand pump beside their home in a village" loading="lazy" decoding="async" class="h-full w-full object-cover"></span>
                  <span class="flex flex-1 flex-col p-5">
                    <span class="t-caption font-semibold uppercase tracking-[0.08em] text-marigold">Current appeal</span>
                    <span class="mt-1.5 font-display text-[19px] font-semibold leading-snug">Essential support for families in Pakistan</span>
                    <span class="mt-3 inline-flex items-center gap-2 font-display text-[15px] font-semibold text-marigold group-hover:underline">Give to the appeal<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></span>
                  </span>
                </a>
              </div>
            </div>
          </details>
        </li>
        <li><a class="t-label rounded-sm py-2 text-ink transition-colors hover:text-water" href="impact.html">Impact</a></li>
        <li><a class="t-label rounded-sm py-2 text-ink transition-colors hover:text-water" href="get-involved.html">Get involved</a></li>
        <li><a class="t-label rounded-sm py-2 text-ink transition-colors hover:text-water" href="contact.html">Contact</a></li>
      </ul>
    </nav>
    <div class="flex items-center gap-3 pr-14 lg:pr-0">
      <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px bg-marigold text-ink hover:bg-marigold-deep h-10 px-4 text-[15px]" href="donate.html"><span class="sm:hidden">Donate</span><span class="hidden sm:inline">Donate now</span></a>
    </div>
  </div>
  <details class="group/m lg:hidden">
    <summary class="absolute right-5 top-2.5 grid size-11 place-items-center rounded-md border border-line-strong text-ink sm:right-8 cursor-pointer list-none [&::-webkit-details-marker]:hidden"><span class="sr-only">Navigation</span><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="group-open/m:hidden"><path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="hidden group-open/m:block"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg></summary>
    <nav aria-label="Header 9 mobile navigation" class="border-t border-line">
      <div class="mx-auto w-full max-w-content px-5 sm:px-8 pb-8 pt-2">
        <ul class="divide-y divide-line border-b border-line">
          <li><a class="block py-4 font-display text-[19px] font-semibold text-ink hover:text-water" href="about.html">About</a></li>
          <li>
            <details class="group/mc">
              <summary class="flex cursor-pointer list-none items-center justify-between py-4 font-display text-[19px] font-semibold text-ink hover:text-water [&::-webkit-details-marker]:hidden">Our causes<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="transition-transform group-open/mc:rotate-180"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"></path></svg></summary>
              <ul class="grid gap-1 pb-4">
                <li><a class="block rounded-md bg-smoke px-4 py-3 font-display text-[16px] text-ink hover:text-water" href="causes.html#food-distribution">Food distribution</a></li>
                <li><a class="block rounded-md bg-smoke px-4 py-3 font-display text-[16px] text-ink hover:text-water" href="causes.html#medical-assistance">Medical assistance</a></li>
                <li><a class="block rounded-md bg-smoke px-4 py-3 font-display text-[16px] text-ink hover:text-water" href="causes.html#emergency-relief">Emergency relief</a></li>
                <li><a class="block rounded-md bg-smoke px-4 py-3 font-display text-[16px] text-ink hover:text-water" href="causes.html#clean-water">Clean water</a></li>
                <li><a class="block rounded-md bg-smoke px-4 py-3 font-display text-[16px] text-ink hover:text-water" href="causes.html#education">Education</a></li>
                <li><a class="block rounded-md px-4 py-3 font-display text-[16px] font-semibold text-water hover:underline" href="causes.html">See all our causes</a></li>
              </ul>
            </details>
          </li>
          <li><a class="block py-4 font-display text-[19px] font-semibold text-ink hover:text-water" href="impact.html">Impact</a></li>
          <li><a class="block py-4 font-display text-[19px] font-semibold text-ink hover:text-water" href="get-involved.html">Get involved</a></li>
          <li><a class="block py-4 font-display text-[19px] font-semibold text-ink hover:text-water" href="contact.html">Contact</a></li>
        </ul>
        <div class="mt-6 grid gap-3 sm:grid-cols-2">
          <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px bg-marigold text-ink hover:bg-marigold-deep h-12 px-6 text-base" href="donate.html?fund=current-appeal">Give to the appeal</a>
          <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px border border-ink text-ink hover:bg-smoke h-12 px-6 text-base" href="donate.html?fund=zakat">Give Zakat</a>
        </div>
      </div>
    </nav>
  </details>
</header>

Headers & navigation · Design 10

Logo tab and stacked rows

A teal tab holds the logo and charity number; beside it, a slim utility row (tagline, email, phone) sits above the main links and two giving buttons.

Registered charity 1215863

Supporting people in Pakistan and the UK

info@zafarfoundation.org.uk 07940 040010

Give monthly DonateDonate now

<header class="relative bg-white">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8 flex items-stretch gap-3 sm:gap-6 lg:gap-10">
    <a class="flex shrink-0 flex-col justify-center bg-water px-3 py-2 text-white sm:px-4 lg:px-6" aria-label="Zafar Foundation home" href="index.html">
      <img src="images/logo-white.svg" alt="Zafar Foundation" width="521" height="80" class="h-7 w-auto sm:h-8 xl:h-9">
      <span class="t-caption mt-2 hidden text-white/80 lg:block">Registered charity 1215863</span>
    </a>
    <div class="flex min-w-0 flex-1 flex-col border-b border-line">
      <div class="hidden items-center justify-between gap-6 border-b border-line py-2.5 font-display text-[13px] text-slate lg:flex">
        <p>Supporting people in Pakistan and the UK</p>
        <div class="flex items-center gap-6">
          <a href="mailto:info@zafarfoundation.org.uk" class="inline-flex items-center gap-2 hover:text-water"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="text-water"><path d="M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48Zm-96,85.15L52.57,64H203.43ZM98.71,128,40,181.81V74.19Zm11.84,10.85,12,11.05a8,8,0,0,0,10.82,0l12-11.05,58,53.15H52.57ZM157.29,128,216,74.18V181.82Z"></path></svg>info@zafarfoundation.org.uk</a>
          <a href="tel:+447940040010" class="inline-flex items-center gap-2 hover:text-water"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="text-water"><path d="M222.37,158.46l-47.11-21.11-.13-.06a16,16,0,0,0-15.17,1.4,8.12,8.12,0,0,0-.75.56L134.87,160c-15.42-7.49-31.34-23.29-38.83-38.51l20.78-24.71c.2-.25.39-.5.57-.77a16,16,0,0,0,1.32-15.06l0-.12L97.54,33.64a16,16,0,0,0-16.62-9.52A56.26,56.26,0,0,0,32,80c0,79.4,64.6,144,144,144a56.26,56.26,0,0,0,55.88-48.92A16,16,0,0,0,222.37,158.46ZM176,208A128.14,128.14,0,0,1,48,80,40.2,40.2,0,0,1,82.87,40a.61.61,0,0,0,0,.12l21,47L83.2,111.86a6.13,6.13,0,0,0-.57.77,16,16,0,0,0-1,15.7c9.06,18.53,27.73,37.06,46.46,46.11a16,16,0,0,0,15.75-1.14,8.44,8.44,0,0,0,.74-.56L168.89,152l47,21.05h0s.08,0,.11,0A40.21,40.21,0,0,1,176,208Z"></path></svg>07940 040010</a>
        </div>
      </div>
      <div class="flex h-16 items-center justify-end gap-4 lg:h-[68px] lg:justify-between">
        <nav aria-label="Header 10 navigation" class="hidden lg:block">
          <ul class="flex items-center gap-6 xl:gap-8">
            <li><a class="t-label rounded-sm py-2 text-ink transition-colors hover:text-water" href="about.html">About</a></li>
            <li><a class="t-label rounded-sm py-2 text-ink transition-colors hover:text-water" href="causes.html">Our causes</a></li>
            <li><a class="t-label rounded-sm py-2 text-ink transition-colors hover:text-water" href="impact.html">Impact</a></li>
            <li><a class="t-label rounded-sm py-2 text-ink transition-colors hover:text-water" href="get-involved.html">Get involved</a></li>
            <li><a class="t-label rounded-sm py-2 text-ink transition-colors hover:text-water" href="contact.html">Contact</a></li>
          </ul>
        </nav>
        <div class="flex items-center gap-2.5 pr-14 lg:pr-0">
          <a class="items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px border border-ink text-ink hover:bg-smoke h-10 px-4 text-[15px] hidden xl:inline-flex" href="donate.html?frequency=monthly">Give monthly</a>
          <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px bg-marigold text-ink hover:bg-marigold-deep h-10 px-4 text-[15px]" href="donate.html"><span class="sm:hidden">Donate</span><span class="hidden sm:inline">Donate now</span></a>
        </div>
      </div>
    </div>
  </div>
  <details class="group/m lg:hidden">
    <summary class="absolute right-5 top-2.5 grid size-11 place-items-center rounded-md border border-line-strong text-ink sm:right-8 cursor-pointer list-none [&::-webkit-details-marker]:hidden"><span class="sr-only">Navigation</span><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="group-open/m:hidden"><path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" class="hidden group-open/m:block"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg></summary>
    <nav aria-label="Header 10 mobile navigation" class="mx-auto w-full max-w-content px-5 sm:px-8 pb-8 pt-5">
      <p class="t-caption font-semibold uppercase tracking-[0.08em] text-water">Supporting people in Pakistan and the UK</p>
      <ul class="mt-3 grid gap-2 sm:grid-cols-2">
        <li><a class="flex items-center gap-3 rounded-md border border-line px-4 py-3 font-display text-[17px] font-semibold text-ink hover:border-water hover:text-water" href="about.html"><span aria-hidden="true" class="size-2 rounded-full bg-marigold"></span>About</a></li>
        <li><a class="flex items-center gap-3 rounded-md border border-line px-4 py-3 font-display text-[17px] font-semibold text-ink hover:border-water hover:text-water" href="causes.html"><span aria-hidden="true" class="size-2 rounded-full bg-marigold"></span>Our causes</a></li>
        <li><a class="flex items-center gap-3 rounded-md border border-line px-4 py-3 font-display text-[17px] font-semibold text-ink hover:border-water hover:text-water" href="impact.html"><span aria-hidden="true" class="size-2 rounded-full bg-marigold"></span>Impact</a></li>
        <li><a class="flex items-center gap-3 rounded-md border border-line px-4 py-3 font-display text-[17px] font-semibold text-ink hover:border-water hover:text-water" href="get-involved.html"><span aria-hidden="true" class="size-2 rounded-full bg-marigold"></span>Get involved</a></li>
        <li><a class="flex items-center gap-3 rounded-md border border-line px-4 py-3 font-display text-[17px] font-semibold text-ink hover:border-water hover:text-water" href="contact.html"><span aria-hidden="true" class="size-2 rounded-full bg-marigold"></span>Contact</a></li>
      </ul>
      <div class="mt-5 grid gap-3 sm:grid-cols-2">
        <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px bg-marigold text-ink hover:bg-marigold-deep h-12 px-6 text-base" href="donate.html">Donate now</a>
        <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px border border-ink text-ink hover:bg-smoke h-12 px-6 text-base" href="donate.html?frequency=monthly">Give monthly</a>
      </div>
      <p class="t-caption mt-5 text-slate">Registered charity 1215863 · <a class="link" href="tel:+447940040010">07940 040010</a></p>
    </nav>
  </details>
</header>