Techlo Theme Documentation

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 InBase.astro

The base layout accepts these props (among others):

src/layouts/Base.astro

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 behaviour, respecting settings.stickyHeader
• "fixed" — pinned over the hero (used by Home 02 and Home 03)
• "static" — scrolls away with the page

The Footer

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.

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. Do not edit the layoutConfig presets unless you want that change to affect every page using that layout.