Open demo

CSS code

HTML 
<header class="ed">
  <div class="ed-meta"><time datetime="2026-08-28">Friday, 28 August 2026</time><span>Riga edition</span></div>
  <div class="ed-mast"><a href="#">The Fieldnote</a><p>Design, typography and the web since 2014</p></div>
  <button class="ed-toggle" type="button" aria-expanded="false" aria-controls="ed-menu" data-menu-button><span aria-hidden="true"><i></i><i></i><i></i></span>Sections</button>
  <nav class="ed-menu" id="ed-menu" aria-label="Sections">
    <ul>
      <li><a href="#" aria-current="page">Latest</a></li>
      <li><a href="#">Typography</a></li>
      <li><a href="#">Interfaces</a></li>
      <li><a href="#">Reviews</a></li>
      <li><a href="#">Archive</a></li>
    </ul>
  </nav>
</header>
CSS 
/* Editorial masthead: a dateline strip, a centred serif title and a row of section links.
   Below 992px the sections fold behind a centred "Sections" button. */
.ed{background:#fffdf8;border-bottom:2px solid #1a1d26;color:#1a1d26}
.ed,.ed *{box-sizing:border-box}
.ed a{text-decoration:none}
.ed ul{list-style:none;margin:0;padding:0}
.ed a:focus-visible,.ed button:focus-visible{outline:2px solid #9a3412;outline-offset:3px}
.ed-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding:12px 34px;border-bottom:1px solid #e7e2d6;
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:#6f6a5e}
.ed-mast{text-align:center;padding:26px 34px 20px}
.ed-mast a{font-family:Georgia,"Times New Roman",serif;font-size:2.6rem;font-weight:700;color:#1a1d26;letter-spacing:-.02em}
.ed-mast p{margin:7px 0 0;font-size:.8rem;color:#6f6a5e;letter-spacing:.04em}
.ed-menu ul{display:flex;flex-wrap:wrap;justify-content:center;gap:26px;padding:0 34px 14px}
.ed-menu a{display:inline-block;padding-bottom:3px;border-bottom:2px solid transparent;font-size:.83rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:#4b4639}
.ed-menu a:hover{color:#9a3412}
.ed-menu a[aria-current="page"]{color:#9a3412;border-bottom-color:#9a3412}
.ed-toggle{display:none;align-items:center;gap:9px;width:fit-content;margin:0 auto 16px;padding:8px 16px;font:inherit;font-size:.78rem;
  font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#4b4639;background:none;border:1px solid #8a8578;border-radius:0;cursor:pointer}
.ed-toggle span{display:flex;flex-direction:column;gap:3px}
.ed-toggle i{display:block;width:14px;height:2px;background:currentColor;transition:transform .2s,opacity .2s}
.ed-toggle[aria-expanded="true"] i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.ed-toggle[aria-expanded="true"] i:nth-child(2){opacity:0}
.ed-toggle[aria-expanded="true"] i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
@media (max-width:991.98px){
  .ed-meta{padding:10px 16px}
  .ed-mast{padding:22px 16px 18px}
  .ed-mast a{font-size:2.2rem}
  .ed-toggle{display:flex}
  .ed-menu{display:none;border-top:1px solid #e7e2d6}
  .ed-menu[data-open]{display:block}
  .ed-menu ul{flex-direction:column;align-items:center;gap:0;padding:6px 16px 12px}
  .ed-menu a{padding:10px 4px 7px}
}
@media (prefers-reduced-motion:reduce){.ed *{transition:none!important}}
JavaScript 
/* Menu button: toggles aria-expanded on itself and data-open on the menu it controls (aria-controls).
   Esc closes an open menu and returns focus to the button; widening past 992px resets it. */
document.querySelectorAll('[data-menu-button]').forEach(btn => {
  const menu = document.getElementById(btn.getAttribute('aria-controls'));
  if (!menu) return;
  const set = open => { btn.setAttribute('aria-expanded', String(open)); menu.toggleAttribute('data-open', open); };
  btn.addEventListener('click', () => set(btn.getAttribute('aria-expanded') !== 'true'));
  document.addEventListener('keydown', e => {
    if (e.key === 'Escape' && btn.getAttribute('aria-expanded') === 'true') { set(false); btn.focus(); }
  });
  matchMedia('(min-width: 992px)').addEventListener('change', e => { if (e.matches) set(false); });
});

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS, Bootstrap 5.3.8 JS bundle

HTML 
<header class="ed">
  <div class="ed-meta d-flex flex-wrap justify-content-between"><time datetime="2026-08-28">Friday, 28 August 2026</time><span>Riga edition</span></div>
  <div class="ed-mast"><a href="#">The Fieldnote</a><p>Design, typography and the web since 2014</p></div>
  <div class="navbar navbar-expand-lg ed-bar">
    <button class="navbar-toggler ed-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#ed-menu" aria-controls="ed-menu" aria-expanded="false"><span aria-hidden="true"><i></i><i></i><i></i></span>Sections</button>
    <nav class="collapse navbar-collapse justify-content-lg-center" id="ed-menu" aria-label="Sections">
      <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link active" href="#" aria-current="page">Latest</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Typography</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Interfaces</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Reviews</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Archive</a></li>
      </ul>
    </nav>
  </div>
</header>
CSS 
/* Editorial masthead with a Bootstrap .navbar-expand-lg as the section row: the .navbar-toggler is a centred
   "Sections" button below 992px and the .navbar-nav wraps and centres above it. */
.ed{background:#fffdf8;border-bottom:2px solid #1a1d26;color:#1a1d26}
.ed a{text-decoration:none}
.ed a:focus-visible,.ed button:focus-visible{outline:2px solid #9a3412;outline-offset:3px;box-shadow:none}
.ed-meta{gap:4px 16px;padding:12px 34px;border-bottom:1px solid #e7e2d6;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:#6f6a5e}
.ed-mast{text-align:center;padding:26px 34px 20px}
.ed-mast a{font-family:Georgia,"Times New Roman",serif;font-size:2.6rem;font-weight:700;color:#1a1d26;letter-spacing:-.02em;text-decoration:none}
.ed-mast p{margin:7px 0 0;font-size:.8rem;color:#6f6a5e;letter-spacing:.04em}
.ed-bar{--bs-navbar-padding-x:34px;--bs-navbar-padding-y:0;--bs-navbar-color:#4b4639;--bs-navbar-hover-color:#9a3412;
  --bs-navbar-active-color:#9a3412;--bs-navbar-nav-link-padding-x:0}
.ed-bar .navbar-nav{--bs-nav-link-padding-y:0;--bs-nav-link-font-size:.83rem;--bs-nav-link-font-weight:700;gap:26px}
.ed-bar .nav-link{display:inline-block;padding-bottom:3px;border-bottom:2px solid transparent;letter-spacing:.07em;text-transform:uppercase}
.ed-bar .nav-link.active{border-bottom-color:#9a3412}
.ed-bar .navbar-toggler{display:flex;align-items:center;gap:9px;margin:0 auto 16px;padding:8px 16px;font-size:.78rem;font-weight:700;line-height:normal;
  letter-spacing:.07em;text-transform:uppercase;color:#4b4639;border:1px solid #8a8578;border-radius:0}
.ed-bar .navbar-toggler:focus{box-shadow:none}
.ed-bar .navbar-toggler span{display:flex;flex-direction:column;gap:3px}
.ed-bar .navbar-toggler i{display:block;width:14px;height:2px;background:currentColor;transition:transform .2s,opacity .2s}
.ed-bar .navbar-toggler[aria-expanded="true"] i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.ed-bar .navbar-toggler[aria-expanded="true"] i:nth-child(2){opacity:0}
.ed-bar .navbar-toggler[aria-expanded="true"] i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
@media (min-width:992px){
  .ed-bar .navbar-toggler{display:none}
  .ed-bar .navbar-nav{flex-wrap:wrap;justify-content:center;padding-bottom:14px}
}
@media (max-width:991.98px){
  .ed-meta{padding:10px 16px}
  .ed-mast{padding:22px 16px 18px}
  .ed-mast a{font-size:2.2rem}
  .ed-bar{--bs-navbar-padding-x:0}
  .ed-bar .navbar-nav{align-items:center;gap:0;padding:6px 16px 12px;border-top:1px solid #e7e2d6}
  .ed-bar .nav-link{padding:10px 4px 7px}
}
@media (prefers-reduced-motion:reduce){.ed *{transition:none!important}}
JavaScript 
/* Bootstrap's Collapse has no Esc handling of its own: close an open navbar menu on Esc
   and return focus to its toggler. */
document.addEventListener('keydown', e => {
  if (e.key !== 'Escape') return;
  document.querySelectorAll('.navbar-collapse.show').forEach(menu => {
    bootstrap.Collapse.getOrCreateInstance(menu, { toggle: false }).hide();
    document.querySelector(`[data-bs-target="#${menu.id}"]`)?.focus();
  });
});

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<header class="border-b-2 border-[#1a1d26] bg-[#fffdf8] text-[#1a1d26]">
  <div class="flex flex-wrap justify-between gap-x-4 gap-y-1 border-b border-[#e7e2d6] px-[34px] py-3 text-[.74rem] tracking-[.1em] text-[#6f6a5e] uppercase max-lg:px-4 max-lg:py-2.5"><time datetime="2026-08-28">Friday, 28 August 2026</time><span>Riga edition</span></div>
  <div class="px-[34px] pt-[26px] pb-5 text-center max-lg:px-4 max-lg:pt-[22px] max-lg:pb-[18px]"><a class="font-[Georgia,'Times_New_Roman',serif] text-[2.6rem] font-bold tracking-[-.02em] text-[#1a1d26] focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[#9a3412] max-lg:text-[2.2rem]" href="#">The Fieldnote</a><p class="mt-[7px] text-[.8rem] tracking-[.04em] text-[#6f6a5e]">Design, typography and the web since 2014</p></div>
  <button class="group mx-auto mb-4 flex w-fit cursor-pointer items-center gap-[9px] border border-[#8a8578] px-4 py-2 text-[.78rem] font-bold tracking-[.07em] text-[#4b4639] uppercase focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[#9a3412] lg:hidden" type="button" aria-expanded="false" aria-controls="ed-menu" data-menu-button><span class="flex flex-col gap-[3px]" aria-hidden="true"><i class="block h-0.5 w-3.5 bg-current transition-transform duration-200 group-aria-expanded:translate-y-[5px] group-aria-expanded:rotate-45 motion-reduce:transition-none"></i><i class="block h-0.5 w-3.5 bg-current transition-opacity duration-200 group-aria-expanded:opacity-0 motion-reduce:transition-none"></i><i class="block h-0.5 w-3.5 bg-current transition-transform duration-200 group-aria-expanded:-translate-y-[5px] group-aria-expanded:-rotate-45 motion-reduce:transition-none"></i></span>Sections</button>
  <nav class="hidden data-open:block lg:block max-lg:border-t max-lg:border-[#e7e2d6]" id="ed-menu" aria-label="Sections">
    <ul class="flex flex-wrap justify-center gap-[26px] px-[34px] pb-3.5 max-lg:flex-col max-lg:items-center max-lg:gap-0 max-lg:px-4 max-lg:pt-1.5 max-lg:pb-3">
      <li><a class="inline-block border-b-2 border-transparent pb-[3px] text-[.83rem] font-bold tracking-[.07em] text-[#4b4639] uppercase hover:text-[#9a3412] aria-[current=page]:border-[#9a3412] aria-[current=page]:text-[#9a3412] focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[#9a3412] max-lg:px-1 max-lg:pt-2.5 max-lg:pb-[7px]" href="#" aria-current="page">Latest</a></li>
      <li><a class="inline-block border-b-2 border-transparent pb-[3px] text-[.83rem] font-bold tracking-[.07em] text-[#4b4639] uppercase hover:text-[#9a3412] aria-[current=page]:border-[#9a3412] aria-[current=page]:text-[#9a3412] focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[#9a3412] max-lg:px-1 max-lg:pt-2.5 max-lg:pb-[7px]" href="#">Typography</a></li>
      <li><a class="inline-block border-b-2 border-transparent pb-[3px] text-[.83rem] font-bold tracking-[.07em] text-[#4b4639] uppercase hover:text-[#9a3412] aria-[current=page]:border-[#9a3412] aria-[current=page]:text-[#9a3412] focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[#9a3412] max-lg:px-1 max-lg:pt-2.5 max-lg:pb-[7px]" href="#">Interfaces</a></li>
      <li><a class="inline-block border-b-2 border-transparent pb-[3px] text-[.83rem] font-bold tracking-[.07em] text-[#4b4639] uppercase hover:text-[#9a3412] aria-[current=page]:border-[#9a3412] aria-[current=page]:text-[#9a3412] focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[#9a3412] max-lg:px-1 max-lg:pt-2.5 max-lg:pb-[7px]" href="#">Reviews</a></li>
      <li><a class="inline-block border-b-2 border-transparent pb-[3px] text-[.83rem] font-bold tracking-[.07em] text-[#4b4639] uppercase hover:text-[#9a3412] aria-[current=page]:border-[#9a3412] aria-[current=page]:text-[#9a3412] focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[#9a3412] max-lg:px-1 max-lg:pt-2.5 max-lg:pb-[7px]" href="#">Archive</a></li>
    </ul>
  </nav>
</header>
CSS 
@theme {
  --breakpoint-lg: 62rem; /* 992px, the same collapse point as Bootstrap's navbar-expand-lg */
}
JavaScript 
/* Menu button: toggles aria-expanded on itself and data-open on the menu it controls (aria-controls).
   Esc closes an open menu and returns focus to the button; widening past 992px resets it. */
document.querySelectorAll('[data-menu-button]').forEach(btn => {
  const menu = document.getElementById(btn.getAttribute('aria-controls'));
  if (!menu) return;
  const set = open => { btn.setAttribute('aria-expanded', String(open)); menu.toggleAttribute('data-open', open); };
  btn.addEventListener('click', () => set(btn.getAttribute('aria-expanded') !== 'true'));
  document.addEventListener('keydown', e => {
    if (e.key === 'Escape' && btn.getAttribute('aria-expanded') === 'true') { set(false); btn.focus(); }
  });
  matchMedia('(min-width: 992px)').addEventListener('change', e => { if (e.matches) set(false); });
});

About this set

A newspaper-style masthead for a magazine or blog: a thin dateline strip with the date and the edition, a large centred serif title with a strapline, and a row of uppercase section links under it, the current one in rust red with an underline. A masthead earns its height by carrying information a logo bar has nowhere to put. The date is a time element with a machine-readable datetime attribute, the colours are warm greys on an off-white ground, and the heavy 2px rule under the header closes it off like a printed page. The section links sit in a nav labelled Sections. Below 992px the title steps down a size and the sections fold behind a centred, outlined “Sections” button with a small icon that turns into a cross when open. The Bootstrap version builds the section row from .navbar-expand-lg with a centred toggler.

What’s included

  • Dateline with a time element and datetime attribute
  • Centred Georgia title with strapline
  • Current section in rust red from aria-current="page"
  • Centred "Sections" text button below 992px
  • Bootstrap .navbar-expand-lg used for the section row only

Accessibility

The section links are in a nav labelled Sections and the current one has aria-current="page". The dateline and strapline use a warm grey that meets 4.5:1 on the off-white ground. The "Sections" button is named by its visible text and reports aria-expanded, and Esc closes the menu and returns focus to it. Focus shows a rust outline, and the icon transition switches off under reduced motion.

Customise it

Change #fffdf8 for the ground, #9a3412 for the accent and the Georgia stack for the title on .ed and .ed-mast. In Bootstrap the link colours are the --bs-navbar-* variables on .ed-bar; in Tailwind edit the text-[#9a3412] and aria-[current=page]: utilities.