Skip to content
Type something to search...
to navigateto selectESC to close
Ultimate Astro Theme GuidesDocs
Techbyte Theme Documentation

Header & Footer Variants

Techbyte has two header components and two footer components, and pages opt into them through Base.astro.

This is easy to miss because the page files just pass short values like headerLayout="header-2" or footerLayout="footer-1".

Variant Switching InBase.astro

The base layout accepts these props (among others):

src/layouts/Base.astro
interface Props {
  headerLayout?: "header-1" | "header-2"; // default: "header-1"
  footerLayout?: "footer-1" | "footer-2"; // default: "footer-2"
  headerPosition?: "fixed" | "static" | "sticky"; // default: "sticky"
  footerDecorativeColor?: string; // footer-2 only
  hasBodyDarkBackground?: boolean;
}

It then renders the matching components:

  • header-1 → src/layouts/components/global/header/Header.astro (with TopBar.astro)
  • header-2 → src/layouts/components/global/header/HeaderTwo.astro (with TopBarTwo.astro)
  • footer-1 → ContactSection.astro + src/layouts/components/global/Footer.astro
  • footer-2 → src/layouts/components/global/FooterTwo.astro

What Changes Between Header Variants

Header 1

  • Dark topbar with the hotline, social links, and the language switcher
  • White header bar with the side-menu toggler in an accent block on the left
  • Text-variant CTA button (Start a Project with an up-right arrow)
  • Used by Home 01 and all inner pages (it is the default)

Header 2

  • Topbar with announcement bar support (settings.announcementBar, falling back to header.announcement in the i18n files)
  • Dark header shell with the navigation in a white rounded bar; turns solid white when scrolling back up
  • Filled pill CTA button
  • Used by Home 02

Header Position

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

  • "sticky" (default) — scroll-aware sticky behaviour, respecting settings.stickyHeader
  • "fixed" — pinned over the hero
  • "static" — scrolls away with the page
  • A full contact section (badge, title, contact info list, and the contact form) renders directly above it
  • Optional decorative background image via settings.footerBackgroundImage
  • Light logo (site.logoAlternate), description, footerPrimary links, and the subscription form
  • Used by Home 01
  • Decorative color band above the footer, controlled by the footerDecorativeColor prop ("accent" default; "light", "transparent", "none")
  • Light logo, footer.descriptionSecondary copy, and the footerSecondary link row
  • The default for all pages

Both variants share FooterCopyright.astro, which renders the footerPrivacy links and the copyright line (with its automatic {{ year }} replacement).

How To Change A Page’s Shell

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

<Base {...page.data} headerLayout="header-2" footerLayout="footer-1">
  <slot />
</Base>

This is the correct approach if you want a whole page to use a different shell. Do not edit the header/footer components unless you want that change to affect every page using that variant.