Customizing Header

Customizing The Header

Files: src/config/config.toml, src/config/menu.<lang>.json, src/i18n/<lang>.json, src/layouts/components/global/header/ · Skill level: Beginner

In the Tina edition, you edit this in Site settings (under Settings), Menus, and Interface labels at /admin/. In the Sanity edition, open Site settings > Settings in the Studio, and Menus and Interface labels under your language. Which layout a page uses stays in the page’s route file in every edition.

Techlo includes three header layouts and several configurable header features:

• Logo – Update your site’s logo
• Menus – Organize and manage navigation menus. For dropdowns, flyouts, mega menus, and keyboard support, see Navigation
• Internationalization (i18n) – Manage your languages
• Navigation Button – Configure the button in the header.
• Topbar – Office-hours or 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:

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

• headerLayout accepts "one", "two" (the default in Base.astro), or "three". Each maps to a preset in src/layouts/components/global/header/Header.astro (topbar style, dark or light appearance, menu alignment, language switcher and button 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 behavior is controlled globally from config.toml:

[settings]
  stickyHeader = true

When enabled, the header gets the has-sticky-behavior class and hides and 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, so it can change with the language:

1. Open src/i18n/en.json, then the same file for each of your other languages, src/i18n/fr.json and src/i18n/ar.json.
2. Locate the "navigation" object.
3. Update "buttonLabel".

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

A value in label in config.toml replaces the text in every language.

Customizing The Topbar Contact Info

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

[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. French and Arabic have their own office hours under contactInfo in src/i18n/<lang>.json.

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/"

An empty description uses the headerOffcanvas text in each language file.

Files For Developers

The header components are in src/layouts/components/global/header/: Header.astro (the presets), Topbar.astro, Navbar.astro, NavbarToggler.astro, LanguageSwitcher.astro, and the menu components that Navigation lists.