Open demo

CSS code

HTML 
<header class="hb">
  <a class="logo" href="#">ZINE!</a>
  <div class="panel" id="hb-panel">
    <nav aria-label="Main"><ul class="links"><li><a href="#" aria-current="page">Issues</a></li><li><a href="#">Stickers</a></li><li><a href="#">About</a></li></ul></nav>
    <a class="cta" href="#">Subscribe <span aria-hidden="true">→</span></a>
  </div>
  <button class="toggle" type="button" aria-expanded="false" aria-controls="hb-panel" aria-label="Menu"><i></i><i></i><i></i></button>
</header>
CSS 
/* Neobrutalist header: a floating card with a 3px ink border, hard offset shadows and buttons that move
   when hovered. Below 992px the nav and the call to action fold into the card behind a menu button. */
.hb{--hb-ink:#111;--hb-pink:#ff90e8;--hb-yellow:#fde047;--hb-green:#4ade80;
  display:flex;flex-wrap:wrap;align-items:center;gap:0 18px;margin:22px;padding:14px 20px;background:#fff;border:3px solid var(--hb-ink);
  border-radius:14px;box-shadow:7px 7px 0 var(--hb-ink);color:var(--hb-ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.hb,.hb *{box-sizing:border-box}
.hb ul{list-style:none;margin:0;padding:0}
.hb a{text-decoration:none}
.hb a:focus-visible,.hb button:focus-visible{outline:3px solid #2563eb;outline-offset:3px}
.hb .logo{font-weight:900;font-size:1.15rem;letter-spacing:-.02em;color:var(--hb-ink);background:var(--hb-pink);border:3px solid var(--hb-ink);border-radius:9px;padding:6px 12px;box-shadow:3px 3px 0 var(--hb-ink)}
.hb .panel{margin-left:auto;display:flex;align-items:center;gap:18px}
.hb .links{display:flex;gap:10px}
.hb .links a{display:block;font-size:.88rem;font-weight:800;color:var(--hb-ink);padding:9px 14px;border:3px solid transparent;border-radius:9px;transition:transform .12s,box-shadow .12s,background .12s,border-color .12s}
.hb .links a:hover{border-color:var(--hb-ink);background:var(--hb-yellow);box-shadow:3px 3px 0 var(--hb-ink);transform:translate(-1px,-1px)}
.hb .links a[aria-current="page"]{border-color:var(--hb-ink);background:var(--hb-yellow)}
.hb .cta{display:block;font-size:.88rem;font-weight:900;text-transform:uppercase;letter-spacing:.03em;color:var(--hb-ink);background:var(--hb-green);border:3px solid var(--hb-ink);
  border-radius:9px;padding:10px 18px;box-shadow:4px 4px 0 var(--hb-ink);white-space:nowrap;transition:transform .12s,box-shadow .12s}
.hb .cta:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--hb-ink)}
.hb .toggle{display:none;width:46px;height:46px;flex-direction:column;align-items:center;justify-content:center;gap:5px;margin-left:auto;
  background:var(--hb-yellow);border:3px solid var(--hb-ink);border-radius:9px;box-shadow:3px 3px 0 var(--hb-ink);cursor:pointer}
.hb .toggle i{display:block;width:20px;height:3px;background:var(--hb-ink);transition:transform .15s,opacity .15s}
.hb .toggle[aria-expanded="true"] i:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hb .toggle[aria-expanded="true"] i:nth-child(2){opacity:0}
.hb .toggle[aria-expanded="true"] i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
@media (max-width:991.98px){
  .hb{margin:14px;padding:12px 14px;box-shadow:5px 5px 0 var(--hb-ink)}
  .hb .toggle{display:flex}
  .hb .panel{display:none;order:9;flex-basis:100%;margin:0;flex-direction:column;align-items:stretch;gap:12px;padding:16px 0 4px}
  .hb .panel[data-open]{display:flex}
  .hb .links{flex-direction:column;gap:6px}
  .hb .cta{text-align:center}
}
@media (prefers-reduced-motion:reduce){.hb *{transition:none!important}.hb .links a:hover,.hb .cta:hover{transform:none}}
JavaScript 
/* The menu button (below 992px) toggles aria-expanded and data-open on the panel; Esc closes it and returns focus. */
(() => {
  const toggle = document.querySelector('.hb .toggle'); if (!toggle) return;
  const panel = document.getElementById(toggle.getAttribute('aria-controls'));
  const isOpen = () => toggle.getAttribute('aria-expanded') === 'true';
  const set = open => { toggle.setAttribute('aria-expanded', open); panel.toggleAttribute('data-open', open); };
  toggle.addEventListener('click', () => set(!isOpen()));
  document.addEventListener('keydown', e => { if (e.key === 'Escape' && isOpen()) { set(false); toggle.focus(); } });
})();

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS, Bootstrap 5.3.8 JS bundle

HTML 
<header class="hb">
  <nav class="navbar navbar-expand-lg" aria-label="Main">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">ZINE!</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#hb-panel" aria-controls="hb-panel" aria-expanded="false" aria-label="Menu"><i></i><i></i><i></i></button>
      <div class="collapse navbar-collapse justify-content-end" id="hb-panel">
        <ul class="navbar-nav">
          <li class="nav-item"><a class="nav-link active" href="#" aria-current="page">Issues</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Stickers</a></li>
          <li class="nav-item"><a class="nav-link" href="#">About</a></li>
        </ul>
        <a class="btn cta" href="#">Subscribe <span aria-hidden="true">→</span></a>
      </div>
    </div>
  </nav>
</header>
CSS 
/* Bootstrap .navbar-expand-lg drawn as a neobrutalist card: 3px ink borders, hard offset shadows, moving buttons. */
.hb{--hb-ink:#111;--hb-pink:#ff90e8;--hb-yellow:#fde047;--hb-green:#4ade80}
.hb .navbar{--bs-navbar-padding-y:14px;--bs-navbar-padding-x:20px;--bs-navbar-color:var(--hb-ink);--bs-navbar-hover-color:var(--hb-ink);--bs-navbar-active-color:var(--hb-ink);
  --bs-navbar-brand-color:var(--hb-ink);--bs-navbar-brand-hover-color:var(--hb-ink);--bs-navbar-brand-padding-y:6px;--bs-navbar-brand-margin-end:0;--bs-navbar-nav-link-padding-x:14px;
  margin:22px;background:#fff;border:3px solid var(--hb-ink);border-radius:14px;box-shadow:7px 7px 0 var(--hb-ink)}
.hb .container-fluid{padding:0;gap:0 18px}
.hb .navbar-brand{font-weight:900;font-size:1.15rem;letter-spacing:-.02em;line-height:normal;background:var(--hb-pink);border:3px solid var(--hb-ink);border-radius:9px;padding-left:12px;padding-right:12px;box-shadow:3px 3px 0 var(--hb-ink)}
.hb .navbar-collapse{gap:18px}
.hb .navbar-nav{--bs-nav-link-padding-y:9px;--bs-nav-link-font-weight:800;--bs-nav-link-font-size:.88rem;gap:10px}
.hb .nav-link{border:3px solid transparent;border-radius:9px;transition:transform .12s,box-shadow .12s,background .12s,border-color .12s}
.hb .nav-link:hover{border-color:var(--hb-ink);background:var(--hb-yellow);box-shadow:3px 3px 0 var(--hb-ink);transform:translate(-1px,-1px)}
.hb .nav-link.active{border-color:var(--hb-ink);background:var(--hb-yellow)}
.hb .cta{--bs-btn-font-size:.88rem;--bs-btn-font-weight:900;--bs-btn-padding-x:18px;--bs-btn-padding-y:10px;--bs-btn-border-width:3px;--bs-btn-border-radius:9px;
  --bs-btn-color:var(--hb-ink);--bs-btn-bg:var(--hb-green);--bs-btn-border-color:var(--hb-ink);--bs-btn-hover-color:var(--hb-ink);--bs-btn-hover-bg:var(--hb-green);--bs-btn-hover-border-color:var(--hb-ink);
  --bs-btn-active-color:var(--hb-ink);--bs-btn-active-bg:var(--hb-green);--bs-btn-active-border-color:var(--hb-ink);
  text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;box-shadow:4px 4px 0 var(--hb-ink);transition:transform .12s,box-shadow .12s}
.hb .cta:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--hb-ink)}
.hb a:focus-visible,.hb button:focus-visible{outline:3px solid #2563eb;outline-offset:3px}
.hb .cta:focus-visible{box-shadow:4px 4px 0 var(--hb-ink)}
.hb .navbar-toggler{width:46px;height:46px;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:var(--hb-yellow);border:3px solid var(--hb-ink);border-radius:9px;box-shadow:3px 3px 0 var(--hb-ink)}
.hb .navbar-toggler i{display:block;width:20px;height:3px;background:var(--hb-ink);transition:transform .15s,opacity .15s}
.hb .navbar-toggler[aria-expanded="true"] i:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hb .navbar-toggler[aria-expanded="true"] i:nth-child(2){opacity:0}
.hb .navbar-toggler[aria-expanded="true"] i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
@media (min-width:992px){.hb .navbar-toggler{display:none}}
@media (max-width:991.98px){
  .hb .navbar{--bs-navbar-padding-y:12px;--bs-navbar-padding-x:14px;margin:14px;box-shadow:5px 5px 0 var(--hb-ink)}
  .hb .container-fluid{gap:0}
  .hb .navbar-collapse{padding-top:16px}
  .hb .navbar-nav{gap:6px;margin-bottom:12px}
  .hb .navbar-nav .nav-link{padding-left:14px;padding-right:14px}
  .hb .cta{display:block;margin-bottom:4px}
}
@media (prefers-reduced-motion:reduce){.hb *{transition:none!important}.hb .nav-link:hover,.hb .cta:hover{transform:none}}
JavaScript 
/* Esc closes the collapsed menu (below 992px) and returns focus to the menu button. */
document.addEventListener('keydown', e => {
  const panel = document.querySelector('.hb .navbar-collapse.show');
  if (e.key !== 'Escape' || !panel) return;
  bootstrap.Collapse.getOrCreateInstance(panel).hide();
  document.querySelector(`[data-bs-target="#${panel.id}"]`).focus();
});

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<header class="m-[22px] flex flex-wrap items-center gap-x-[18px] rounded-[14px] border-3 border-hb-ink bg-white px-5 py-3.5 text-hb-ink shadow-[7px_7px_0_var(--color-hb-ink)] max-lg:m-3.5 max-lg:gap-x-0 max-lg:px-3.5 max-lg:py-3 max-lg:shadow-[5px_5px_0_var(--color-hb-ink)]">
  <a class="rounded-[9px] border-3 border-hb-ink bg-hb-pink px-3 py-1.5 text-[1.15rem] font-black tracking-[-.02em] text-hb-ink shadow-[3px_3px_0_var(--color-hb-ink)] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#2563eb]" href="#">ZINE!</a>
  <div class="ml-auto hidden items-center gap-[18px] data-open:flex lg:flex max-lg:order-9 max-lg:m-0 max-lg:basis-full max-lg:flex-col max-lg:items-stretch max-lg:gap-3 max-lg:pt-4 max-lg:pb-1" id="hb-panel">
    <nav aria-label="Main">
      <ul class="flex gap-2.5 max-lg:flex-col max-lg:gap-1.5">
        <li><a class="block rounded-[9px] border-3 border-hb-ink bg-hb-yellow px-3.5 py-[9px] text-[.88rem] font-extrabold text-hb-ink focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#2563eb]" href="#" aria-current="page">Issues</a></li>
        <li><a class="block rounded-[9px] border-3 border-transparent px-3.5 py-[9px] text-[.88rem] font-extrabold text-hb-ink transition-all duration-[120ms] hover:-translate-px hover:border-hb-ink hover:bg-hb-yellow hover:shadow-[3px_3px_0_var(--color-hb-ink)] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#2563eb] motion-reduce:transition-none motion-reduce:hover:translate-0" href="#">Stickers</a></li>
        <li><a class="block rounded-[9px] border-3 border-transparent px-3.5 py-[9px] text-[.88rem] font-extrabold text-hb-ink transition-all duration-[120ms] hover:-translate-px hover:border-hb-ink hover:bg-hb-yellow hover:shadow-[3px_3px_0_var(--color-hb-ink)] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#2563eb] motion-reduce:transition-none motion-reduce:hover:translate-0" href="#">About</a></li>
      </ul>
    </nav>
    <a class="block rounded-[9px] border-3 border-hb-ink bg-hb-green px-[18px] py-2.5 text-[.88rem] font-black tracking-[.03em] whitespace-nowrap text-hb-ink uppercase shadow-[4px_4px_0_var(--color-hb-ink)] transition-all duration-[120ms] hover:translate-0.5 hover:shadow-[1px_1px_0_var(--color-hb-ink)] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#2563eb] motion-reduce:transition-none motion-reduce:hover:translate-0 max-lg:text-center" href="#">Subscribe <span aria-hidden="true">→</span></a>
  </div>
  <button class="toggle group ml-auto flex size-[46px] cursor-pointer flex-col items-center justify-center gap-[5px] rounded-[9px] border-3 border-hb-ink bg-hb-yellow shadow-[3px_3px_0_var(--color-hb-ink)] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#2563eb] lg:hidden" type="button" aria-expanded="false" aria-controls="hb-panel" aria-label="Menu">
    <i class="block h-[3px] w-5 bg-hb-ink transition-transform duration-150 group-aria-expanded:translate-y-2 group-aria-expanded:rotate-45 motion-reduce:transition-none"></i>
    <i class="block h-[3px] w-5 bg-hb-ink transition-opacity duration-150 group-aria-expanded:opacity-0 motion-reduce:transition-none"></i>
    <i class="block h-[3px] w-5 bg-hb-ink transition-transform duration-150 group-aria-expanded:-translate-y-2 group-aria-expanded:-rotate-45 motion-reduce:transition-none"></i>
  </button>
</header>
CSS 
@theme {
  --breakpoint-lg: 62rem; /* 992px, the same collapse point as Bootstrap's navbar-expand-lg */
  --color-hb-ink: #111;
  --color-hb-pink: #ff90e8;
  --color-hb-yellow: #fde047;
  --color-hb-green: #4ade80;
}
JavaScript 
/* The menu button (below 992px) toggles aria-expanded and data-open on the panel; Esc closes it and returns focus. */
(() => {
  const toggle = document.querySelector('.toggle[aria-controls="hb-panel"]'); if (!toggle) return;
  const panel = document.getElementById(toggle.getAttribute('aria-controls'));
  const isOpen = () => toggle.getAttribute('aria-expanded') === 'true';
  const set = open => { toggle.setAttribute('aria-expanded', open); panel.toggleAttribute('data-open', open); };
  toggle.addEventListener('click', () => set(!isOpen()));
  document.addEventListener('keydown', e => { if (e.key === 'Escape' && isOpen()) { set(false); toggle.focus(); } });
})();

About this set

A loud, playful header drawn as a floating white card with a 3px black border, rounded corners and a hard 7px offset shadow, sitting on a mint dotted background. The ZINE! logo is a pink sticker with its own border and shadow, the links (Issues, Stickers, About) gain a yellow fill, a border and a small shadow and lift by a pixel on hover, and the current page keeps the yellow fill. The green Subscribe button is uppercase with a 4px shadow that collapses as the button slides into it when hovered, so it looks pressed. Below 992px the card keeps its style: a yellow bordered menu button appears, and the links and the Subscribe button stack inside the card, which grows to hold them. Use it for zines, indie shops, creator newsletters, events and brands with a strong opinion. Everything is flat colour, borders and box-shadow, with no images. The Bootstrap version styles a .navbar-expand-lg through the –bs-navbar-* and –bs-btn-* variables.

What’s included

  • Floating card with a thick border and a hard offset shadow
  • Sticker-style logo
  • Links and button that move on hover
  • Current page keeps the yellow highlight
  • Menu and button stack inside the card on phones

Accessibility

The links are in a nav labelled Main with aria-current="page" on Issues. The menu button has aria-expanded and aria-controls, and Esc closes the menu and returns focus to it. Every control shows a 3px blue focus outline that stands out from the black borders, the arrow in Subscribe is hidden from screen readers, and hover movement and transitions are removed under prefers-reduced-motion.

Customise it

Change --hb-ink, --hb-pink, --hb-yellow and --hb-green on .hb, and the box-shadow offsets for a heavier or lighter look. Bootstrap uses the same variables; in Tailwind edit the --color-hb-* theme colours and the shadow-[…] utilities.