Techbyte Theme Documentation

Customizing the Header

Techbyte includes two header layouts and several configurable header features:

• Logo – Update your site’s logo
• Menus – Organize and manage navigation menus
• Internationalization (i18n) – Enable the language switcher
• Navigation Button – Configure the CTA button in the header.
• Topbar – Hotline / social links / language strip above the navbar.
• Announcement Bar – Promo message shown by Header 2’s topbar.
• Side Menu & Header Offcanvas – Slide-in panels with about text, contact info, and a CTA.

---

Choosing a Header Layout

Every page renders through src/layouts/Base.astro, which accepts a headerLayout and a headerPosition prop:

src/pages/[...lang]/home-two.astro

<Base {...page?.data} headerLayout="header-2">
  <!-- page sections -->
</Base>

• headerLayout accepts "header-1" (default) or "header-2". They render two different components: Header.astro and HeaderTwo.astro in src/layouts/components/global/header/.
• headerPosition accepts "sticky" (default), "fixed", or "static".

See Header & Footer Variants for a full breakdown of what each layout changes.

Sticky Header Behavior

Scroll-aware sticky behaviour is controlled globally from config.toml:

src/config/config.toml

[settings]
  stickyHeader = true

When enabled (or when a page uses headerPosition="fixed"), the header gets the has-sticky-behavior class and hides/reveals on scroll.

Customizing the Navigation Button

Open src/config/config.toml and locate the following section:

[settings.navigationButton]
  enable = true
  label  = "Start a Project"
  url    = "/contact/"

If label is left empty, the button label falls back to navigation.buttonLabel from the active i18n file (src/i18n/en.json / fr.json):

"navigation": {
  "buttonLabel": "Get in Touch"
}

Announcement Bar (Header 2)

Header 2’s topbar can show an announcement message, configured under settings.announcementBar:

[settings.announcementBar]
  enable = true
  label  = "New: Free IT health audit for first-time clients — book a discovery call today."

If label is empty, Techbyte falls back to header.announcement from the active i18n file (which supports inline Markdown links).

Customizing the Topbar Contact Info

The strip above the navigation reads from the global contact info:

src/config/config.toml

[settings.contactInfo]
  address = "125 Market Street, Suite 420, San Francisco, CA 94105"
  email   = "[email protected]"
  phone   = "+1 415 555 0198"
  mapLink = "https://www.google.com/maps?q=San+Francisco,CA&output=embed"

The topbar shows the phone hotline plus social links from src/config/social.json. The mapLink embed URL is used by the contact page map.

Side Menu & Header Offcanvas

Header 1 includes a side-menu toggler (the hamburger lines on the left) that opens a slide-in panel with an about blurb, contact details, and a CTA button. Its copy comes from the sideMenu object in the i18n files:

"sideMenu": {
  "aboutTitle": "About Techbyte",
  "aboutDescription": "We provide managed IT support, cloud consulting...",
  "contactTitle": "Contact Us",
  "button": { "label": "Contact Us", "url": "/contact/" }
}

The mobile offcanvas panel is configured under settings.headerOffcanvas in config.toml:

[settings.headerOffcanvas]
  enable      = true
  logo        = "/images/logo-footer.png"
  description = "Managed IT, cloud, cybersecurity, and software services built around your business outcomes."

  [settings.headerOffcanvas.button]
    enable = true
    label  = "Start a Project"
    url    = "/contact/"

Empty description / label values fall back to headerOffcanvas strings in the active i18n file.