Techlo Theme Documentation

Customizing the Header

Techlo includes three 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 – Office-hours / location strip above the navbar.
• Header Offcanvas – The slide-in panel opened by the toggler.

---

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 {...homepageContent?.data} headerLayout="two" headerPosition="fixed">
  <!-- page sections -->
</Base>

• headerLayout accepts "one", "two", or "three". Each maps to a preset in src/layouts/components/global/header/Header.astro (topbar style, dark/light appearance, menu alignment, language switcher and CTA visibility).
• 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, the header gets the has-sticky-behavior class and hides/reveals on scroll. It does not apply to headers rendered with headerPosition="fixed".

Customizing the Navigation Button

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

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

The button is shown by header layouts two and three.

Updating the Button Label

The label is normally taken from the language files:

1. Open src/i18n/en.json or src/i18n/fr.json.
2. Locate the "navigation" object.
3. Update "buttonLabel".

Example: English (en.json)

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

If multilingual mode is disabled, you can also hardcode the label directly in config.toml.

Customizing the Topbar Contact Info

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

src/config/config.toml

[settings.contactInfo]
  phone       = "[518-564-3200](tel:5185643200)"
  email       = "[[email protected]](mailto:[email protected])"
  address     = "1791 Yorkshire Circle Kitty <br /> Hawk, NC 279499"
  officeHours = "Office Hours: 8:00 AM – 10:00 PM"

Layouts one and three show the office hours on the left of the topbar, while layout two shows the address.

Header Offcanvas Panel

The slide-in panel opened by the menu toggler is configured under settings.headerOffcanvas:

[settings.headerOffcanvas]
  enable      = true
  logo        = ""
  description  = ""

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

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