Open demo

CSS code

HTML 
<header class="hdd">
  <div class="util">
    <p>Mon–Fri 8:00–18:00 · <svg aria-hidden="true" width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z"/></svg><a href="tel:+15550142214">(555) 014-2214</a></p>
    <nav aria-label="Utility"><ul><li><a href="#">Service areas</a></li><li><a href="#">Careers</a></li><li><a href="#">Client portal</a></li></ul></nav>
  </div>
  <div class="main">
    <a class="logo" href="#">Harbor<span>Build</span></a>
    <nav class="panel" id="hdd-panel" aria-label="Main">
      <ul class="links"><li><a href="#" aria-current="page">Home</a></li><li><a href="#">Services</a></li><li><a href="#">Projects</a></li><li><a href="#">About</a></li><li><a href="#">Contact</a></li></ul>
    </nav>
    <a class="quote" href="#">Get a quote</a>
    <button class="toggle" type="button" aria-expanded="false" aria-controls="hdd-panel" aria-label="Menu"><i></i><i></i><i></i></button>
  </div>
</header>
CSS 
/* Two decks: a utility strip (hours, phone, secondary links) over the main bar (logo, nav, quote button).
   Below 992px the main nav collapses behind the menu button and the strip wraps onto two lines. */
.hdd{--hdd-navy:#0e3a5d;--hdd-green:#0b7d57;--hdd-muted:#3d4f5f;--hdd-pale:#bcd7ea;
  color:#182430;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.hdd,.hdd *{box-sizing:border-box}
.hdd ul{list-style:none;margin:0;padding:0}
.hdd a{text-decoration:none}
.hdd a:focus-visible,.hdd button:focus-visible{outline:2px solid var(--hdd-navy);outline-offset:2px}
.hdd .util{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 18px;padding:8px 36px;background:var(--hdd-navy);color:var(--hdd-pale);font-size:.78rem}
.hdd .util p{margin:0;display:flex;align-items:center;gap:6px}
.hdd .util a{color:var(--hdd-pale);border-radius:3px}
.hdd .util a:hover{color:#fff}
.hdd .util a:focus-visible{outline-color:#fff}
.hdd .util ul{display:flex;gap:18px}
.hdd .main{display:flex;align-items:center;gap:30px;min-height:72px;padding:0 36px;background:#fff;border-bottom:3px solid var(--hdd-navy)}
.hdd .logo{font-weight:900;font-size:1.2rem;letter-spacing:-.02em;color:var(--hdd-navy);border-radius:4px}
.hdd .logo span{color:var(--hdd-green)}
.hdd .panel{margin-left:auto;align-self:stretch}
.hdd .links{display:flex;gap:4px;height:100%}
.hdd .links a{display:flex;align-items:center;height:calc(100% + 3px);padding:0 15px;font-size:.9rem;font-weight:700;color:var(--hdd-muted);
  border-bottom:3px solid transparent;transition:color .15s,border-color .15s}
.hdd .links a:focus-visible{outline-offset:-4px;border-radius:6px}
.hdd .links a:hover,.hdd .links a[aria-current="page"]{color:var(--hdd-navy);border-bottom-color:var(--hdd-green)}
.hdd .quote{font-size:.88rem;font-weight:800;color:#fff;background:var(--hdd-green);padding:11px 20px;border-radius:10px;white-space:nowrap;transition:background .15s}
.hdd .quote:hover{background:#096a4a}
.hdd .toggle{display:none;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:#fff;border:1px solid #cdd7df;border-radius:10px;cursor:pointer}
.hdd .toggle i{display:block;width:20px;height:2px;border-radius:2px;background:var(--hdd-navy);transition:transform .2s,opacity .2s}
.hdd .toggle[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hdd .toggle[aria-expanded="true"] i:nth-child(2){opacity:0}
.hdd .toggle[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:991.98px){
  .hdd .util{padding:8px 16px}
  .hdd .main{flex-wrap:wrap;gap:0 12px;padding:12px 16px}
  .hdd .toggle{display:flex}
  .hdd .quote{margin-left:auto;padding:10px 16px}
  .hdd .panel{display:none;order:9;flex-basis:100%;margin:0;padding:10px 0 4px}
  .hdd .panel[data-open]{display:block}
  .hdd .links{flex-direction:column;gap:2px;height:auto}
  .hdd .links a{height:auto;padding:12px 14px;border-bottom:0;border-left:3px solid transparent}
  .hdd .links a:hover,.hdd .links a[aria-current="page"]{border-left-color:var(--hdd-green);background:#f2f6f8}
}
@media (prefers-reduced-motion:reduce){.hdd *{transition:none!important}}
JavaScript 
/* The menu button (below 992px) toggles aria-expanded and data-open on the main nav; Esc closes it and returns focus. */
(() => {
  const toggle = document.querySelector('.hdd .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="hdd">
  <div class="util d-flex flex-wrap justify-content-between align-items-center">
    <p class="m-0 d-flex align-items-center">Mon–Fri 8:00–18:00 · <svg aria-hidden="true" width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z"/></svg><a href="tel:+15550142214">(555) 014-2214</a></p>
    <nav aria-label="Utility"><ul class="list-unstyled m-0 d-flex"><li><a href="#">Service areas</a></li><li><a href="#">Careers</a></li><li><a href="#">Client portal</a></li></ul></nav>
  </div>
  <nav class="navbar navbar-expand-lg" aria-label="Main">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Harbor<span>Build</span></a>
      <div class="d-flex align-items-center gap-2 ms-auto order-lg-last">
        <a class="btn quote" href="#">Get a quote</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#hdd-panel" aria-controls="hdd-panel" aria-expanded="false" aria-label="Menu"><i></i><i></i><i></i></button>
      </div>
      <div class="collapse navbar-collapse justify-content-end" id="hdd-panel">
        <ul class="navbar-nav">
          <li class="nav-item"><a class="nav-link active" href="#" aria-current="page">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Projects</a></li>
          <li class="nav-item"><a class="nav-link" href="#">About</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>
</header>
CSS 
/* A utility strip built with flex utilities over a Bootstrap .navbar-expand-lg main deck. */
.hdd{--hdd-navy:#0e3a5d;--hdd-green:#0b7d57;--hdd-muted:#3d4f5f;--hdd-pale:#bcd7ea}
.hdd .util{gap:4px 18px;padding:8px 36px;background:var(--hdd-navy);color:var(--hdd-pale);font-size:.78rem}
.hdd .util p{gap:6px}
.hdd .util ul{gap:18px}
.hdd .util a{color:var(--hdd-pale);text-decoration:none;border-radius:3px}
.hdd .util a:hover{color:#fff}
.hdd .navbar{--bs-navbar-padding-y:0;--bs-navbar-padding-x:36px;--bs-navbar-color:var(--hdd-muted);--bs-navbar-hover-color:var(--hdd-navy);
  --bs-navbar-active-color:var(--hdd-navy);--bs-navbar-brand-color:var(--hdd-navy);--bs-navbar-brand-hover-color:var(--hdd-navy);
  --bs-navbar-brand-padding-y:0;--bs-navbar-brand-margin-end:0;--bs-navbar-nav-link-padding-x:15px;
  min-height:72px;background:#fff;border-bottom:3px solid var(--hdd-navy)}
.hdd .container-fluid{padding:0;gap:30px}
.hdd .navbar-brand{font-weight:900;font-size:1.2rem;letter-spacing:-.02em;border-radius:4px}
.hdd .navbar-brand span{color:var(--hdd-green)}
.hdd .navbar-nav{--bs-nav-link-font-weight:700;--bs-nav-link-font-size:.9rem;gap:4px}
.hdd .nav-link{display:flex;align-items:center;border-bottom:3px solid transparent;transition:color .15s,border-color .15s}
.hdd .nav-link:hover,.hdd .nav-link.active{border-bottom-color:var(--hdd-green)}
.hdd .quote{--bs-btn-font-size:.88rem;--bs-btn-font-weight:800;--bs-btn-padding-x:20px;--bs-btn-padding-y:11px;--bs-btn-border-radius:10px;--bs-btn-border-width:0;
  --bs-btn-color:#fff;--bs-btn-bg:var(--hdd-green);--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#096a4a;--bs-btn-active-color:#fff;--bs-btn-active-bg:#096a4a;white-space:nowrap}
.hdd a:focus-visible,.hdd button:focus-visible{outline:2px solid var(--hdd-navy);outline-offset:2px;box-shadow:none}
.hdd .util a:focus-visible{outline-color:#fff}
.hdd .nav-link:focus-visible{outline-offset:-4px;border-radius:6px}
.hdd .navbar-toggler{width:44px;height:44px;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px solid #cdd7df;border-radius:10px}
.hdd .navbar-toggler i{display:block;width:20px;height:2px;border-radius:2px;background:var(--hdd-navy);transition:transform .2s,opacity .2s}
.hdd .navbar-toggler[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hdd .navbar-toggler[aria-expanded="true"] i:nth-child(2){opacity:0}
.hdd .navbar-toggler[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (min-width:992px){
  .hdd .navbar-toggler{display:none}
  .hdd .container-fluid,.hdd .navbar-collapse,.hdd .navbar-nav{align-self:stretch}
  .hdd .nav-link{height:calc(100% + 3px)}
}
@media (max-width:991.98px){
  .hdd .util{padding:8px 16px}
  .hdd .navbar{--bs-navbar-padding-x:16px;padding-top:12px;padding-bottom:12px}
  .hdd .container-fluid{gap:0}
  .hdd .quote{--bs-btn-padding-x:16px;--bs-btn-padding-y:10px}
  .hdd .navbar-nav{gap:2px;padding:10px 0 4px}
  .hdd .navbar-nav .nav-link{padding:12px 14px;border-bottom:0;border-left:3px solid transparent}
  .hdd .nav-link:hover,.hdd .nav-link.active{border-left-color:var(--hdd-green);background:#f2f6f8}
}
@media (prefers-reduced-motion:reduce){.hdd *{transition:none!important}}
JavaScript 
/* Esc closes the collapsed menu (below 992px) and returns focus to the menu button. */
document.addEventListener('keydown', e => {
  const panel = document.querySelector('.hdd .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="hdd text-[#182430]">
  <div class="flex flex-wrap items-center justify-between gap-x-[18px] gap-y-1 bg-hdd-navy px-9 py-2 text-[.78rem] text-hdd-pale max-lg:px-4">
    <p class="flex items-center gap-1.5">Mon–Fri 8:00–18:00 · <svg aria-hidden="true" width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z"/></svg><a class="rounded-[3px] hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white" href="tel:+15550142214">(555) 014-2214</a></p>
    <nav aria-label="Utility"><ul class="flex gap-[18px]"><li><a class="rounded-[3px] hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white" href="#">Service areas</a></li><li><a class="rounded-[3px] hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white" href="#">Careers</a></li><li><a class="rounded-[3px] hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white" href="#">Client portal</a></li></ul></nav>
  </div>
  <div class="flex min-h-[72px] items-center gap-[30px] border-b-3 border-hdd-navy bg-white px-9 max-lg:flex-wrap max-lg:gap-x-3 max-lg:gap-y-0 max-lg:px-4 max-lg:py-3">
    <a class="rounded text-[1.2rem] font-black tracking-[-.02em] text-hdd-navy focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-hdd-navy" href="#">Harbor<span class="text-hdd-green">Build</span></a>
    <nav class="ml-auto hidden self-stretch data-open:block lg:block max-lg:order-9 max-lg:m-0 max-lg:basis-full max-lg:self-auto max-lg:pt-2.5 max-lg:pb-1" id="hdd-panel" aria-label="Main">
      <ul class="flex h-full gap-1 max-lg:h-auto max-lg:flex-col max-lg:gap-0.5">
        <li class="h-full max-lg:h-auto"><a class="flex h-[calc(100%+3px)] items-center border-b-3 border-hdd-green px-[15px] text-[.9rem] font-bold text-hdd-navy focus-visible:rounded-md focus-visible:outline-2 focus-visible:-outline-offset-4 focus-visible:outline-hdd-navy max-lg:h-auto max-lg:border-b-0 max-lg:border-l-3 max-lg:bg-[#f2f6f8] max-lg:px-3.5 max-lg:py-3" href="#" aria-current="page">Home</a></li>
        <li class="h-full max-lg:h-auto"><a class="flex h-[calc(100%+3px)] items-center border-b-3 border-transparent px-[15px] text-[.9rem] font-bold text-hdd-muted transition-colors duration-150 hover:border-hdd-green hover:text-hdd-navy focus-visible:rounded-md focus-visible:outline-2 focus-visible:-outline-offset-4 focus-visible:outline-hdd-navy motion-reduce:transition-none max-lg:h-auto max-lg:border-b-0 max-lg:border-l-3 max-lg:px-3.5 max-lg:py-3 max-lg:hover:bg-[#f2f6f8]" href="#">Services</a></li>
        <li class="h-full max-lg:h-auto"><a class="flex h-[calc(100%+3px)] items-center border-b-3 border-transparent px-[15px] text-[.9rem] font-bold text-hdd-muted transition-colors duration-150 hover:border-hdd-green hover:text-hdd-navy focus-visible:rounded-md focus-visible:outline-2 focus-visible:-outline-offset-4 focus-visible:outline-hdd-navy motion-reduce:transition-none max-lg:h-auto max-lg:border-b-0 max-lg:border-l-3 max-lg:px-3.5 max-lg:py-3 max-lg:hover:bg-[#f2f6f8]" href="#">Projects</a></li>
        <li class="h-full max-lg:h-auto"><a class="flex h-[calc(100%+3px)] items-center border-b-3 border-transparent px-[15px] text-[.9rem] font-bold text-hdd-muted transition-colors duration-150 hover:border-hdd-green hover:text-hdd-navy focus-visible:rounded-md focus-visible:outline-2 focus-visible:-outline-offset-4 focus-visible:outline-hdd-navy motion-reduce:transition-none max-lg:h-auto max-lg:border-b-0 max-lg:border-l-3 max-lg:px-3.5 max-lg:py-3 max-lg:hover:bg-[#f2f6f8]" href="#">About</a></li>
        <li class="h-full max-lg:h-auto"><a class="flex h-[calc(100%+3px)] items-center border-b-3 border-transparent px-[15px] text-[.9rem] font-bold text-hdd-muted transition-colors duration-150 hover:border-hdd-green hover:text-hdd-navy focus-visible:rounded-md focus-visible:outline-2 focus-visible:-outline-offset-4 focus-visible:outline-hdd-navy motion-reduce:transition-none max-lg:h-auto max-lg:border-b-0 max-lg:border-l-3 max-lg:px-3.5 max-lg:py-3 max-lg:hover:bg-[#f2f6f8]" href="#">Contact</a></li>
      </ul>
    </nav>
    <a class="rounded-[10px] bg-hdd-green px-5 py-[11px] text-[.88rem] font-extrabold whitespace-nowrap text-white transition-colors duration-150 hover:bg-[#096a4a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-hdd-navy motion-reduce:transition-none max-lg:ml-auto max-lg:px-4 max-lg:py-2.5" href="#">Get a quote</a>
    <button class="toggle group flex size-11 cursor-pointer flex-col items-center justify-center gap-[5px] rounded-[10px] border border-[#cdd7df] bg-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-hdd-navy lg:hidden" type="button" aria-expanded="false" aria-controls="hdd-panel" aria-label="Menu">
      <i class="block h-0.5 w-5 rounded-sm bg-hdd-navy transition-transform duration-200 group-aria-expanded:translate-y-[7px] group-aria-expanded:rotate-45 motion-reduce:transition-none"></i>
      <i class="block h-0.5 w-5 rounded-sm bg-hdd-navy transition-opacity duration-200 group-aria-expanded:opacity-0 motion-reduce:transition-none"></i>
      <i class="block h-0.5 w-5 rounded-sm bg-hdd-navy transition-transform duration-200 group-aria-expanded:-translate-y-[7px] group-aria-expanded:-rotate-45 motion-reduce:transition-none"></i>
    </button>
  </div>
</header>
CSS 
@theme {
  --breakpoint-lg: 62rem; /* 992px, the same collapse point as Bootstrap's navbar-expand-lg */
  --color-hdd-navy: #0e3a5d;
  --color-hdd-green: #0b7d57;
  --color-hdd-muted: #3d4f5f;
  --color-hdd-pale: #bcd7ea;
}
JavaScript 
/* The menu button (below 992px) toggles aria-expanded and data-open on the main nav; Esc closes it and returns focus. */
(() => {
  const toggle = document.querySelector('.hdd .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(); } });
})();

About this set

A two-level header for service businesses. A navy utility strip carries opening hours, a click-to-call phone number and three secondary links (Service areas, Careers, Client portal); under it, the main deck holds the HarborBuild wordmark, five navigation links and a green Get a quote button. The main links are full height, and a green bar along the bottom edge marks hover and the current page, overlapping the navy rule that closes the header. On phones the utility strip wraps onto two short lines rather than hiding its links, the quote button stays in view next to the menu button, and the five links drop into a list with a green bar down the left of the current one. Use it for contractors, clinics, law firms, trades and any local business whose visitors want to call or ask for a price. The phone number is a tel: link, and the green was darkened from the original so white button text reaches 4.5:1. The Bootstrap version builds the strip with flex utilities and the main deck with a .navbar-expand-lg.

What’s included

  • Utility strip with hours, a tel: link and secondary links
  • Full-height links with a green bar on hover and the current page
  • Quote button stays visible on phones
  • Utility strip wraps instead of hiding its links
  • Two navs, labelled Utility and Main

Accessibility

The two link groups are navs labelled Utility and Main, and the current page has aria-current="page". The menu button has aria-expanded and aria-controls, and Esc closes the menu and returns focus to it. Focus outlines are navy on white and white on navy, the quote button's green was darkened to #0b7d57 for 4.5:1 contrast, and transitions stop under prefers-reduced-motion.

Customise it

Change --hdd-navy, --hdd-green, --hdd-muted and --hdd-pale on .hdd. Bootstrap uses the same variables alongside --bs-navbar-* and --bs-btn-*; in Tailwind edit the --color-hdd-* theme colours.