# Header

## Header

**Files:** `src/config/config.toml`, `src/config/menu.<language>.json`, `src/i18n/<language>.json`, page frontmatter · **Skill level:** Beginner

Every header has the logo, the menu, one button ("Let's talk"), the light/dark button, and the language switch. On phones and tablets the menu folds into a menu button. Margo has three header layouts. They all read the same menu and the same button, so switching layouts never changes your links.

### Choose A Header Layout
```toml
# src/config/config.toml
[settings.layout]
  # pill    | floating centred glass pill that compacts after scrolling and re-expands at the top
  # bar     | full-width glass bar: logo left, menu centred, button right; folds into the pill on scroll
  # overlay | transparent over a full-bleed hero photo with light text, then turns into the pill
  header = "bar"
```

| Layout    | What it looks like                                                                                   | Demo page        |
| --------- | ---------------------------------------------------------------------------------------------------- | ---------------- |
| `pill`    | A glass pill floating at the top center. After you scroll a little it folds to the logo and a small button, and opens again at the top of the page, on hover, or from that button | none (set it to see it) |
| `bar`     | A glass bar as wide as the content: logo on the left, menu in the middle, button on the right. Once the page scrolls it turns into the pill. Margo ships with this layout | `/`, inner pages, `/home-studio/` |
| `overlay` | No glass over a dark full-width hero photo: the logo, menu, and buttons are light. Once the photo has scrolled away it turns into the pill | `/home-photo/` |

The header always stays at the top of the screen. (`stickyHeader` in `[settings]` changes nothing in Margo.)

**One page, another layout.** Add `headerLayout` to the page's frontmatter. It wins over `[settings.layout] header`:

```yaml
---
title: "Anselm Rook, photographer in Marseille"
headerLayout: "overlay" # pill | bar | overlay
---
```

The demo homepages set their own this way: `src/content/homepage/english/home-studio.md` uses `bar`, and `home-photo.md` uses `overlay`. A misspelled value is caught by `npm run astro-check`.

<Aside type="tip" title="Use overlay with a photo hero">
  `overlay` has light text, so it needs a dark photo under it. Use it on a page
  that opens with the hero `photo` layout, as `/home-photo/` does. On a page
  that starts with a light section, use `pill` or `bar`.
</Aside>

### The Menu
The header menu is plain data: the `headerPrimary` list in `src/config/menu.<language>.json`. Margo ships five items: **Work**, **Services**, **About**, **Journal**, and **Pages**. [Menus](/margo/customization/menus/) explains how to edit them, and [Navigation](/margo/features/navigation/) explains every kind of item and how the menu behaves.

**Pages** is a catalog of the demo: it links to the three homepages, the inner pages, and `/elements/`. Turn it off before you launch (see [Menus](/margo/customization/menus/)).

On large screens (1024 px and up), dropdowns open in one panel under the header. Below 1024 px, the menu button opens the mobile menu with the same items.

### The Header Button
```toml
[settings.navigationButton]
  enable = true
  label  = ""          # Empty uses `nav.letsTalk` from src/i18n/<language>.json
  url    = "/contact/"
```

To change the words, edit `nav.letsTalk` in each language file: `src/i18n/en.json` ("Let's talk"), `src/i18n/fr.json` ("Parlons-en"), and `src/i18n/ar.json`. A `label` in `config.toml` is used in every language, so leave it empty on a site with more than one language. `enable = false` removes the button from the header and the mobile menu.

### Light/Dark Button
The sun and moon button switches between light and dark mode, and the visitor's choice is remembered in their browser. The mode of a first visit is `colorMode` in `[settings]`. See [Colors & Fonts](/margo/customization/colors-fonts/#light-and-dark-mode).

### Language Switch
With more than one language, the header shows a language switch that opens the same page in another language. Each language is listed under its own name. It disappears when the site has only one language. The languages come from `src/config/language.json`; see [Internationalization](/margo/customization/internationalization/).

### Search
The site search opens with <kbd>Cmd</kbd> + <kbd>K</kbd> (<kbd>Ctrl</kbd> + <kbd>K</kbd> on Windows and Linux) or <kbd>/</kbd> on any page. It works on the built site, not in `npm run dev`. See [Search](/margo/customization/search/).

### The Logo
The logo on the left links to the homepage of the current language. It is your `logoText`, or your `logo` image. See [Site Identity & Logo](/margo/customization/site-identity-logo/).

### Accessibility
The first <kbd>Tab</kbd> on every page shows a **Skip to content** link that jumps past the header. Its text is `a11y.skipToContent` in the language files. The menu works with the keyboard; see [Navigation](/margo/features/navigation/).

### Files For Developers
In `src/layouts/components/global/header/`: `Header.astro` picks the layout (from the page's `headerLayout`, else `[settings.layout] header`, else `pill`) and adds the skip link, and `SiteHeader.astro` draws the header in that layout. The light/dark button is `src/layouts/components/widgets/ThemeSwitcher.astro`, and the styles are in `src/styles/navigation.css`.

### Do It With AI
```text
Set the header to the [pill | bar | overlay] layout in [settings.layout] of
src/config/config.toml, and list the content files that set their own headerLayout. Change the
header button: url "[URL]" in [settings.navigationButton], and nav.letsTalk in each file in
src/i18n/ to "[LABEL]", translated. Keep the label short enough for a phone screen.
```