# Header & Announcement
## Header & Announcement
**Files:** `src/config/config.toml`, `src/config/menu.en.json`, `src/i18n/en.json`, page frontmatter · **Skill level:** Beginner
Every header bar has the logo, the menu, and a button ("Get a free quote"). On small screens the menu links and the button move into a slide-in panel, opened with a **Menu** button. Around the bar, Ecozen has four header layouts with different contact rows, backgrounds, and an optional announcement strip.
In the Tina edition, these settings are under **Site settings** at `/admin/`, and the words under **Interface labels**. In the Sanity edition, they are in the Studio under **Site settings > Settings**, and the words under **Interface labels** in each language.
### Choose A Header Layout
```toml
# src/config/config.toml
[settings.header]
layout = "classic" # classic | transparent | floating | promo
```
| Layout | What it looks like | Demo page |
| ------------- | ---------------------------------------------------------------------------------------------------- | -------------- |
| `classic` | A dark top bar with your email, phone, opening hours, social icons, and the language switch, above a white header bar. The default, used by inner pages | `/home-two/` |
| `transparent` | Sits over the photo at the top of the page, with white links and the light logo (`logoAlternate`). A thin info row above it shows your phone, hours, social icons, and the language switch, and a round phone icon sits next to the button. The info row is hidden on small screens. Once the info row has scrolled away, the bar turns solid | `/`, `/services/` |
| `floating` | A white bar with rounded corners, set in from the edges over the photo at the top of the page. It stays set in while you scroll | `/home-three/` |
| `promo` | A citrus announcement strip (see below), then a white bar with your phone number and opening hours beside the button (on wide screens) | `/home-four/` |
**One page, another layout.** Add `headerLayout` to the page's frontmatter. It wins over `[settings.header] layout`:
```yaml
---
headerLayout: "promo" # classic | transparent | floating | promo
title: "EV charging and home batteries"
---
```
Each demo homepage sets its own. The `transparent` and `floating` layouts sit over the first section, so use them only on pages that open with a full-width photo or dark band, such as a `photo` or `panel` hero. Three routes, `index.astro`, `home-three.astro`, and `services/index.astro`, also pass `headerTransparent={true}` to ``; it means the same as `headerLayout: "transparent"`, and a page's `headerLayout` wins over it (`/home-three/` sets `floating`). `npm run astro-check` reports a misspelled value in files that have a schema.
The contact details come from `[settings.contactInfo]` in `config.toml`, the social icons from the first four links in `src/config/social.json`, and the opening hours can be translated with `footer.hoursText` in the i18n files (see [Footer](/ecozen/customization/footer/#contact-layout)).
**Language switch:** in the top bar for `classic`, in the main bar for `floating` and `promo`, and for `transparent` in the info row on large screens and the main bar below them; it lists the language names from `src/config/language.json`, and in the main bar, phones show only its icon.
### The Header Button
```toml
[settings.navigationButton]
enable = true
label = "" # empty uses navigation.buttonLabel from src/i18n/en.json ("Get a free quote")
url = "/contact/"
```
To change the words in every language, edit `navigation.buttonLabel` in each file in `src/i18n/`. On small screens this button is hidden; the menu panel has its own button (see below).
### Sticky Header
```toml
[settings]
stickyHeader = true # the header bar stays at the top while you scroll
```
Only the header bar sticks. The announcement strip, the `classic` top bar, and the `transparent` info row sit above it and scroll away with the page. When the bar reaches the top of the window, only its colours change: `classic` and `promo` get a slightly see-through white background, and `transparent` turns solid. Its size and position never change, so nothing jumps while you scroll.
Set `stickyHeader = false` to let the header scroll away with the page. The `floating` bar is pinned to the top in both cases.
### The Announcement Strip
A citrus line at the very top of the page, for an offer or a seasonal campaign. It ends with an arrow link and a close button. When a visitor closes it, their browser remembers that until the text changes.
The `promo` layout always shows it. The `classic` layout shows it when you turn it on:
```toml
[settings.announcementBar]
enable = true # also show the strip above the classic header
label = "" # empty uses header.announcement from src/i18n/en.json
```
The text is one line of Markdown. Its first link becomes the arrow link at the end, for example `Free roof survey this month. [Book yours](/contact/)`. The text comes from, in this order:
1. `headerAnnouncement` in the page's frontmatter, as `/home-four/` does:
```yaml
headerAnnouncement: "Home charger fitted from $1,190 this month, with off-peak setup included. [Get a quote](/contact/)"
```
2. `[settings.announcementBar] label` in `config.toml`, the same in every language
3. `header.announcement` in each file in `src/i18n/`
For a site in several languages, leave `label` empty and use the i18n files, or `headerAnnouncement` in each language's page file. The close button's screen-reader name is `header.announcementClose`.
The `transparent` and `floating` layouts never show the strip.
### The Mobile Menu Panel
On phones and tablets, the menu links are hidden and the **Menu** pill button opens a panel from the right (from the left on right-to-left pages) with, from top to bottom:
- a round close button and your logo
- a short description
- the menu links. Dropdowns open as lists inside the panel, with a plus or minus sign, and a group inside a dropdown opens its own list. The **Services** mega menu shows each group's name as a small label, its links with their icons, and the mega menu's `cta` card with its button (see [Menus](/ecozen/customization/menus/))
- your address, phone, and email from `[settings.contactInfo]`. The phone and email are links
- up to four social icons from `src/config/social.json`
- a button, full width on phones
On large screens the **Menu** button and the panel are hidden, because the menu links sit in the header bar. Developers can show the button there too with `hideOffcanvas={false}` on `` in a page route; the panel then opens without the menu links.
The description and the button are set in `config.toml`:
```toml
[settings.headerOffcanvas]
enable = true
description = "" # empty uses headerOffcanvas.description from the i18n files
[settings.headerOffcanvas.button]
enable = true
label = "" # empty uses headerOffcanvas.buttonLabel
url = "/contact/"
```
The labels of the panel are in the i18n files: `navigation.menuLabel` is the text of the **Menu** button ("Menu"), `navigation.closeMenu` is the screen-reader name of the close button ("Close menu"), `navigation.mainLabel` names the menu for screen readers ("Main"), and `widgets.offcanvasLabel` names the panel ("Site menu"). Change them in every language file. `navigation.languageLabel` is the screen-reader name of the language switch.
The panel is a native `