Home / Snippets / Headers / Local services header Try the design Preview widthFit panel Mobile · 390 px Tablet · 768 px Desktop · 1280 px Open demo ↗
Preview links stay in the example. Copy the source to use your own destinations. Form previews never send information.
Copy the source HTML CSS JavaScript Astro
Copy HTML <header class="fct-local-services-header s-header s-topbar" data-snippet="local-services-header"><div class="s-top"><a href="tel:+441632960000">+44 (0)1632 960000</a><span>Mon–Fri · 09:00–17:00 · Example hours</span></div><div class="s-wrap s-header-row"><a href="index.html" class="s-brand">Northfield Services</a><button type="button" class="s-nav-toggle" aria-expanded="false" aria-controls="fct-local-services-header-nav">Menu</button><nav aria-label="Primary" id="fct-local-services-header-nav"><a href="index.html">Home</a><a href="about.html">About</a><a href="work.html">Work</a><a href="contact.html">Contact</a><details class="s-disclosure"><summary>Services</summary><div><a href="services.html">Home maintenance</a><a href="commercial.html">Commercial work</a></div></details><a class="s-button" href="contact.html">Request a visit</a></nav></div></header>
Copy CSS .fct-local-services-header{--s-bg:#162e42;--s-ink:#ffffff;--s-accent:#e0bd80;font:16px/1.65 system-ui,sans-serif;color:var(--s-ink);background:var(--s-bg)}.fct-local-services-header,.fct-local-services-header *{box-sizing:border-box}.fct-local-services-header :is(h2,h3,p,ul,figure){margin:0}.fct-local-services-header h2,.fct-local-services-header h3{line-height:1.2;letter-spacing:-.035em}.fct-local-services-header h2{font-size:clamp(1.8rem,4vw,3.5rem)}.fct-local-services-header a{color:inherit;text-underline-offset:5px;overflow-wrap:anywhere}.fct-local-services-header :is(a,button,input,textarea,select,summary):focus-visible{outline:3px solid var(--s-accent);outline-offset:4px}.fct-local-services-header button,.fct-local-services-header input,.fct-local-services-header textarea,.fct-local-services-header select{font:inherit}.fct-local-services-header a,.fct-local-services-header button{touch-action:manipulation}.fct-local-services-header .s-wrap{max-width:1200px;margin-inline:auto;padding:40px 28px}.fct-local-services-header .s-kicker{font-size:.8125rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:18px}.fct-local-services-header .s-button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:11px 21px;border:1px solid currentColor;text-decoration:none;background:transparent;color:inherit;cursor:pointer;border-radius:2px;font-weight:600}.fct-local-services-header .s-muted{opacity:.82}.fct-local-services-header .s-links{display:flex;gap:8px 26px;flex-wrap:wrap}.fct-local-services-header .s-links a{display:inline-flex;align-items:center;min-height:44px}.fct-local-services-header .s-rule{border-top:1px solid currentColor;padding-top:20px;margin-top:30px}.fct-local-services-header .s-grid{display:grid;gap:28px;grid-template-columns:repeat(3,minmax(0,1fr))}.fct-local-services-header img{max-width:100%;height:auto;display:block}.fct-local-services-header .s-brand{font-size:1.3rem;font-weight:700;letter-spacing:-.05em;text-decoration:none}@media(max-width:640px){.fct-local-services-header .s-wrap{padding:30px 20px}.fct-local-services-header .s-grid{grid-template-columns:1fr}}
.fct-local-services-header .s-header-row{padding-block:22px;display:flex;align-items:center;gap:30px;justify-content:space-between;flex-wrap:wrap}.fct-local-services-header nav{display:flex;gap:24px;align-items:center;flex-wrap:wrap}.fct-local-services-header nav>a{min-height:44px;display:inline-flex;align-items:center;text-decoration:none}.fct-local-services-header .s-nav-toggle{display:none;color:inherit;background:transparent;border:1px solid currentColor;padding:10px 16px;min-height:44px;cursor:pointer}.fct-local-services-header .s-top{display:flex;justify-content:space-between;gap:20px;padding:10px max(24px,calc((100% - 1144px)/2));font-size:.875rem;border-bottom:1px solid currentColor;flex-wrap:wrap}.fct-local-services-header .s-top a{min-height:24px}.fct-local-services-header .s-announcement{text-align:center;background:#252d26;color:#fff;padding:10px;font-size:.875rem}.fct-local-services-header.s-line{border-bottom:1px solid #acb19f}.fct-local-services-header.s-line .s-brand{font-weight:500;letter-spacing:.1em;font-size:1.1rem}.fct-local-services-header.s-centered .s-brand{font:500 clamp(2rem,5vw,4rem)/1.1 Georgia,serif;letter-spacing:.04em}.fct-local-services-header.s-centered .s-header-row{justify-content:center}.fct-local-services-header.s-centered nav{width:100%;justify-content:center;border-top:1px solid currentColor;padding-top:15px}.fct-local-services-header.s-shop nav{width:100%;border-top:1px solid #aab09f;padding-top:12px}.fct-local-services-header.s-shop .s-header-action{margin-left:auto}.fct-local-services-header.s-editorial .s-brand{font:700 clamp(2rem,5vw,4rem)/1 Georgia,serif;letter-spacing:-.06em}.fct-local-services-header.s-editorial nav{width:100%;justify-content:center;border-block:3px double currentColor;padding-block:8px}.fct-local-services-header .s-disclosure{position:relative}.fct-local-services-header .s-disclosure summary{min-height:44px;cursor:pointer;align-content:center}.fct-local-services-header .s-disclosure>div{position:absolute;z-index:3;background:var(--s-bg);border:1px solid currentColor;padding:15px;min-width:200px;right:0}.fct-local-services-header .s-disclosure a{display:block;min-height:44px;padding:8px}@media(max-width:800px){.fct-local-services-header .s-header-row{gap:16px}.fct-local-services-header.s-ready .s-nav-toggle{display:block;margin-left:auto}.fct-local-services-header .s-brand{max-width:calc(100% - 100px)}.fct-local-services-header.s-ready nav{display:none}.fct-local-services-header.s-ready.s-open nav{display:flex;flex-direction:column;align-items:stretch;width:100%;gap:4px;padding-top:10px}.fct-local-services-header .s-disclosure>div{position:static}.fct-local-services-header .s-header-action{order:3}.fct-local-services-header .s-top{padding:12px 20px}.fct-local-services-header.s-centered .s-header-row{justify-content:space-between}}Copy JavaScript (()=>{for(const root of document.querySelectorAll('[data-snippet="local-services-header"]')){if(root.dataset.initialized)continue;root.dataset.initialized='true';root.classList.add('s-ready');const toggle=root.querySelector('.s-nav-toggle');toggle.addEventListener('click',()=>{const open=toggle.getAttribute('aria-expanded')!=='true';toggle.setAttribute('aria-expanded',String(open));root.classList.toggle('s-open',open);});root.addEventListener('keydown',e=>{if(e.key==='Escape'){root.querySelectorAll('details[open]').forEach(e=>e.open=false);if(root.classList.contains('s-open')){root.classList.remove('s-open');toggle.setAttribute('aria-expanded','false');toggle.focus();}}});}})();
Copy Astro ---
// Generated, escaped static markup. Use a distinct prefix for each instance.
const markup = "\u003cheader class=\"fct-local-services-header s-header s-topbar\" data-snippet=\"local-services-header\"\u003e\u003cdiv class=\"s-top\"\u003e\u003ca href=\"tel:+441632960000\"\u003e+44 (0)1632 960000\u003c/a\u003e\u003cspan\u003eMon–Fri · 09:00–17:00 · Example hours\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"s-wrap s-header-row\"\u003e\u003ca href=\"index.html\" class=\"s-brand\"\u003eNorthfield Services\u003c/a\u003e\u003cbutton type=\"button\" class=\"s-nav-toggle\" aria-expanded=\"false\" aria-controls=\"fct-local-services-header-nav\"\u003eMenu\u003c/button\u003e\u003cnav aria-label=\"Primary\" id=\"fct-local-services-header-nav\"\u003e\u003ca href=\"index.html\"\u003eHome\u003c/a\u003e\u003ca href=\"about.html\"\u003eAbout\u003c/a\u003e\u003ca href=\"work.html\"\u003eWork\u003c/a\u003e\u003ca href=\"contact.html\"\u003eContact\u003c/a\u003e\u003cdetails class=\"s-disclosure\"\u003e\u003csummary\u003eServices\u003c/summary\u003e\u003cdiv\u003e\u003ca href=\"services.html\"\u003eHome maintenance\u003c/a\u003e\u003ca href=\"commercial.html\"\u003eCommercial work\u003c/a\u003e\u003c/div\u003e\u003c/details\u003e\u003ca class=\"s-button\" href=\"contact.html\"\u003eRequest a visit\u003c/a\u003e\u003c/nav\u003e\u003c/div\u003e\u003c/header\u003e";
---
<Fragment set:html={markup} />
<style is:global>
.fct-local-services-header{--s-bg:#162e42;--s-ink:#ffffff;--s-accent:#e0bd80;font:16px/1.65 system-ui,sans-serif;color:var(--s-ink);background:var(--s-bg)}.fct-local-services-header,.fct-local-services-header *{box-sizing:border-box}.fct-local-services-header :is(h2,h3,p,ul,figure){margin:0}.fct-local-services-header h2,.fct-local-services-header h3{line-height:1.2;letter-spacing:-.035em}.fct-local-services-header h2{font-size:clamp(1.8rem,4vw,3.5rem)}.fct-local-services-header a{color:inherit;text-underline-offset:5px;overflow-wrap:anywhere}.fct-local-services-header :is(a,button,input,textarea,select,summary):focus-visible{outline:3px solid var(--s-accent);outline-offset:4px}.fct-local-services-header button,.fct-local-services-header input,.fct-local-services-header textarea,.fct-local-services-header select{font:inherit}.fct-local-services-header a,.fct-local-services-header button{touch-action:manipulation}.fct-local-services-header .s-wrap{max-width:1200px;margin-inline:auto;padding:40px 28px}.fct-local-services-header .s-kicker{font-size:.8125rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:18px}.fct-local-services-header .s-button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:11px 21px;border:1px solid currentColor;text-decoration:none;background:transparent;color:inherit;cursor:pointer;border-radius:2px;font-weight:600}.fct-local-services-header .s-muted{opacity:.82}.fct-local-services-header .s-links{display:flex;gap:8px 26px;flex-wrap:wrap}.fct-local-services-header .s-links a{display:inline-flex;align-items:center;min-height:44px}.fct-local-services-header .s-rule{border-top:1px solid currentColor;padding-top:20px;margin-top:30px}.fct-local-services-header .s-grid{display:grid;gap:28px;grid-template-columns:repeat(3,minmax(0,1fr))}.fct-local-services-header img{max-width:100%;height:auto;display:block}.fct-local-services-header .s-brand{font-size:1.3rem;font-weight:700;letter-spacing:-.05em;text-decoration:none}@media(max-width:640px){.fct-local-services-header .s-wrap{padding:30px 20px}.fct-local-services-header .s-grid{grid-template-columns:1fr}}
.fct-local-services-header .s-header-row{padding-block:22px;display:flex;align-items:center;gap:30px;justify-content:space-between;flex-wrap:wrap}.fct-local-services-header nav{display:flex;gap:24px;align-items:center;flex-wrap:wrap}.fct-local-services-header nav>a{min-height:44px;display:inline-flex;align-items:center;text-decoration:none}.fct-local-services-header .s-nav-toggle{display:none;color:inherit;background:transparent;border:1px solid currentColor;padding:10px 16px;min-height:44px;cursor:pointer}.fct-local-services-header .s-top{display:flex;justify-content:space-between;gap:20px;padding:10px max(24px,calc((100% - 1144px)/2));font-size:.875rem;border-bottom:1px solid currentColor;flex-wrap:wrap}.fct-local-services-header .s-top a{min-height:24px}.fct-local-services-header .s-announcement{text-align:center;background:#252d26;color:#fff;padding:10px;font-size:.875rem}.fct-local-services-header.s-line{border-bottom:1px solid #acb19f}.fct-local-services-header.s-line .s-brand{font-weight:500;letter-spacing:.1em;font-size:1.1rem}.fct-local-services-header.s-centered .s-brand{font:500 clamp(2rem,5vw,4rem)/1.1 Georgia,serif;letter-spacing:.04em}.fct-local-services-header.s-centered .s-header-row{justify-content:center}.fct-local-services-header.s-centered nav{width:100%;justify-content:center;border-top:1px solid currentColor;padding-top:15px}.fct-local-services-header.s-shop nav{width:100%;border-top:1px solid #aab09f;padding-top:12px}.fct-local-services-header.s-shop .s-header-action{margin-left:auto}.fct-local-services-header.s-editorial .s-brand{font:700 clamp(2rem,5vw,4rem)/1 Georgia,serif;letter-spacing:-.06em}.fct-local-services-header.s-editorial nav{width:100%;justify-content:center;border-block:3px double currentColor;padding-block:8px}.fct-local-services-header .s-disclosure{position:relative}.fct-local-services-header .s-disclosure summary{min-height:44px;cursor:pointer;align-content:center}.fct-local-services-header .s-disclosure>div{position:absolute;z-index:3;background:var(--s-bg);border:1px solid currentColor;padding:15px;min-width:200px;right:0}.fct-local-services-header .s-disclosure a{display:block;min-height:44px;padding:8px}@media(max-width:800px){.fct-local-services-header .s-header-row{gap:16px}.fct-local-services-header.s-ready .s-nav-toggle{display:block;margin-left:auto}.fct-local-services-header .s-brand{max-width:calc(100% - 100px)}.fct-local-services-header.s-ready nav{display:none}.fct-local-services-header.s-ready.s-open nav{display:flex;flex-direction:column;align-items:stretch;width:100%;gap:4px;padding-top:10px}.fct-local-services-header .s-disclosure>div{position:static}.fct-local-services-header .s-header-action{order:3}.fct-local-services-header .s-top{padding:12px 20px}.fct-local-services-header.s-centered .s-header-row{justify-content:space-between}}
</style>
<script is:inline>
(()=>{for(const root of document.querySelectorAll('[data-snippet="local-services-header"]')){if(root.dataset.initialized)continue;root.dataset.initialized='true';root.classList.add('s-ready');const toggle=root.querySelector('.s-nav-toggle');toggle.addEventListener('click',()=>{const open=toggle.getAttribute('aria-expanded')!=='true';toggle.setAttribute('aria-expanded',String(open));root.classList.toggle('s-open',open);});root.addEventListener('keydown',e=>{if(e.key==='Escape'){root.querySelectorAll('details[open]').forEach(e=>e.open=false);if(root.classList.contains('s-open')){root.classList.remove('s-open');toggle.setAttribute('aria-expanded','false');toggle.focus();}}});}})();
</script>
Code tabs need JavaScript. All source formats are included in the open downloads.
Where this design fits The utility strip separates telephone and opening-hour details from the main menu. A native disclosure groups service links without making the whole navigation an application menu.
Contact utility strip Service disclosure Appointment link What is included The HTML ZIP includes a standalone demo, reusable markup, scoped CSS, its small JavaScript runtime, a license and setup notes. The Astro ZIP includes Snippet.astro. It can be imported into an existing Astro page or layout.
Set the right destinations Example navigation, policy and contact links must point to your actual pages. Update visible business details and telephone/email links together. Remove sections that your website does not need.
Add it to an HTML website Copy snippet.html into the relevant page section. Load snippet.css after your existing site stylesheet. The class prefix identifies this design. Load snippet.js once with defer. Keep the included keyboard behavior when adapting interactions. Replace example content and check mobile widths, zoom, links and keyboard focus in your actual website. Use it in Astro Copy Snippet.astro into src/components/, import it into your page or shared layout, and insert the component where the section belongs. Keep each generated prefix unique if you duplicate a component on one page.
Keep the section maintainable Start with the variables at the top of the CSS for background, text and accent colors. Preserve semantic labels and focus styles. Existing site selectors can still affect imported markup, so test the combined result. Read the complete setup notes .
