Header & Footer Variants

Techlo does not have separate header components per page. Instead, a single Header.astro renders one of three layout presets, and pages opt into them through Base.astro.

This is easy to miss because the page files just pass short values like headerLayout="two" and headerPosition="fixed".

Variant Switching In`Base.astro`

The base layout accepts these props (among others):

interface Props {
  headerLayout?: "one" | "two" | "three"; // default: "two"
  headerPosition?: "fixed" | "static" | "sticky"; // default: "sticky"
  hasFooterDarkBackground?: boolean;
  hideOffcanvas?: boolean;
}

It then forwards them to the shared Header component, which resolves a preset from its internal layoutConfig map.

The Three Header Presets

src/layouts/components/global/header/Header.astro defines a layoutConfig object describing each preset:

Header One

Primary (blue) topbar showing office hours
Dark appearance — automatically uses logoAlternate
Menu aligned right, desktop toggler shown
Language switcher shown, navigation CTA button hidden
Used by Home 01

Header Two

Light topbar showing the address / location
Light appearance with the default logo
Navigation CTA button shown (label from navigation.buttonLabel)
Language switcher shown, desktop toggler hidden
Used by Home 02 and most inner pages (it is the default)

Header Three

Navy, compact topbar showing office hours
Transparent + dark appearance over the hero
Navigation CTA button shown, language switcher hidden
Used by Home 03

Header Position

Independent of the preset, headerPosition controls how the header sits on the page:

"sticky" (default) — scroll-aware sticky behavior, respecting settings.stickyHeader
"fixed" — pinned over the hero (used by Home 02 and Home 03)
"static" — scrolls away with the page

Techlo uses a single footer (src/layouts/components/global/Footer.astro) on every page, plus a global CallToAction section rendered by Base.astro just above it. There is no per-page footer component to choose.

You can still influence the footer’s appearance:

hasFooterDarkBackground={true} renders the footer on a dark background.
ctaSpacingTop toggles the spacing above the global call-to-action.
The CTA content itself comes from src/content/sections/<language>/call-to-action.md and can be overridden per page via the ctaSection frontmatter key. In the Tina edition, that is the Cta Section block on the home pages. In the Sanity edition, it is the CTA Section row on Home 1.

The footer’s content is on Footer.

How To Change A Page’s Header

You can switch a page to another preset directly in the page file:

<Base {...page.data} headerLayout="three" headerPosition="fixed">
  <slot />
</Base>

This is the correct approach if you want a whole page to use a different header, in every edition: which header a page uses isn’t in the Tina or Sanity forms. Do not edit the layoutConfig presets unless you want that change to affect every page using that layout.

Header & Footer Variants