# Customizing Header

## Customizing The Header

Veltro has one shared header at `src/layouts/components/global/header/Header.astro`. `src/layouts/Base.astro` renders it on every page.

### Header Position And Behavior
`Base.astro` accepts:

```ts
headerPosition?: "fixed" | "static" | "sticky";
headerBorderOnScroll?: boolean;
hideOffcanvas?: boolean;
```

`headerPosition` defaults to `sticky`. Global scroll-aware behavior is also controlled in `config.toml`:

```toml
[settings]
stickyHeader = true
```

### Navigation Action
```toml
[settings.navigationButton]
enable = true
label = ""
url = "/contact/"
```

When `label` is empty, Veltro uses `navigation.buttonLabel` from `src/i18n/en.json` or `src/i18n/fr.json`.

### Offcanvas Panels
The round menu action opens `SideMenu.astro`. A second Preline offcanvas can be enabled through:

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

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

Empty copy falls back to the active i18n file. `hideOffcanvas` defaults to `true`, which keeps the configured offcanvas toggle mobile-only unless a page passes `hideOffcanvas={false}`.

The header also renders the language switcher when multilingual support is enabled.