Taxo Theme Documentation

Customizing The Header

Taxo has two header layouts:

• header-1 uses Header.astro
• header-2 uses HeaderTwo.astro

The base layout default is header-2, but the main homepage explicitly uses header-1.

Where Header Layouts Are Chosen

src/layouts/Base.astro

const defaultHeader = "header-2";
const resolveHeader = headerLayout || defaultHeader;

src/pages/[...lang]/index.astro

<Base {...page?.data} headerLayout="header-1">

Header 1 Structure

src/layouts/components/global/header/Header.astro renders:

• TopBar.astro
• logo
• headerPrimary navigation
• optional navigation CTA button
• optional offcanvas toggle

TopBar.astro includes:

• working hours label from src/i18n/*.json
• phone chip from settings.contactInfo.phone
• language switcher when multilingual is enabled
• the first 4 enabled links from src/config/social.json

Header 2 Structure

src/layouts/components/global/header/HeaderTwo.astro renders:

• TopBarTwo.astro
• accent logo block
• headerPrimary navigation
• phone CTA block from settings.contactInfo.phone
• optional offcanvas toggle

TopBarTwo.astro includes:

• hotline block from settings.contactInfo.phone
• announcement bar text
• language switcher

Header Settings Inconfig.toml

[settings.navigationButton]
  enable = true
  label = ""
  url = "/contact/"

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

[settings.headerOffcanvas]
  enable = true
  logo = "/images/logo-light.svg"
  description = ""

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

Shared Text Sources

When a label is empty in config.toml, Taxo falls back to src/i18n/en.json or src/i18n/fr.json:

{
  "navigation": {
    "buttonLabel": "Get in Touch"
  },
  "header": {
    "announcement": "Get Your Free Tax Advisor Today..."
  },
  "headerOffcanvas": {
    "description": "We are a digital agency...",
    "buttonLabel": "Let's Talk With Us"
  }
}

Menu Source

Both header layouts use the same menu data:

src/config/menu.en.json

{
  "headerPrimary": []
}

That means a menu change affects:

• header 1 desktop navigation
• header 2 desktop navigation
• the mobile offcanvas navigation

Show Or Hide The Desktop Offcanvas

By default, many pages pass hideOffcanvas={true}, which keeps the offcanvas toggle mobile-only. If you want the desktop offcanvas button visible on a page, change the page file:

<Base {...page?.data} hideOffcanvas={false}>