Lumio Theme Documentation

Customizing the Header

Lumio includes three header variants and several configurable header features:

• Logo – Update your site’s logo
• Menus – Organize and manage navigation menus
• Internationalization (i18n) – Enable multiple languages
• Navigation Button – Configure the CTA button in the header.
• Announcement Bar – Used by HeaderThree.

---

Customizing the Navigation Button

Open src/config/config.toml and locate the following section:

# Navigation Button In Header
[settings.navigationButton]
  enable = true
  label  = ""
  url    = "/contact/"

Updating the Button Label

The label is normally taken from the language files:

1. Open src/i18n/en.json or src/i18n/fr.json.
2. Locate the "navigation" object.
3. Update "buttonLabel".

Example: English (en.json)

"navigation": {
  "buttonLabel": "Get Started"
}

If multilingual mode is disabled, you can also hardcode the label directly in config.toml.

Using Different Header Variants

Lumio’s base layout supports three header variants:

src/layouts/Base.astro

type Props = {
  header?: "one" | "two" | "three";
};

You can switch a page to a different header by passing header="two" or header="three" into <Base />.

Announcement Bar for Header Three

HeaderThree.astro reads from settings.announcementBar:

[settings.announcementBar]
  enable = true
  label  = ""

If label is empty, Lumio falls back to header.announcement from the active i18n file.