# 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](../site-identify-logo/)
- **Menus** – [Organize and manage navigation menus](../menus/). For dropdowns, flyouts, mega menus, and keyboard support, see [Navigation](../../features/navigation/)
- **Internationalization (i18n)** – [Manage your languages](../internationalization/)
- **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:

```astro
// src/pages/[...lang]/home-two.astro
<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](../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`:

```toml
# src/config/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:

```toml
[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"`.

```json
"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:

```toml
# src/config/config.toml
[settings.contactInfo]
  phone       = "[518-564-3200](tel:5185643200)"
  email       = "[hello@example.com](mailto:hello@example.com)"
  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`:

```toml
[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](../../features/navigation/) lists.