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

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

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:

---
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.

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 explains how to edit them, and 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).

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

[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.

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.

Search

The site search opens with Cmd + K (Ctrl + K on Windows and Linux) or / on any page. It works on the built site, not in npm run dev. See 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.

Accessibility

The first Tab 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.

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

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.