Header, footer, and navigation
Build menus under Settings → Navigation, then design header and footer templates under Settings → Header & Footer → Edit—the template editor uses its own block library for logo, menus, footer columns, and newsletter, applied site-wide unless Page Settings overrides a page.
Your site chrome—top bar and bottom bar—appears on every public page. ArtInStack splits the work into two places that work together:
| What you configure | Where | What it controls |
|---|---|---|
| Menu links (URLs and order) | Settings → Navigation | Which pages appear in menus site-wide |
| Header & footer design | Settings → Header & Footer → Edit | Logo, layout, columns, social, copyright, newsletter, cart icon |
The Header & Footer editor is a separate visual builder (same family as the page editor) but scoped to <header> or <footer> only. It has its own block library—not the hero, gallery, or portfolio blocks you use on pages.
Capability overview
- Navigation tab — Curate link lists (internal pages or external URLs) that menu blocks can reference.
- Header & Footer tab — Create or pick templates; Edit opens the template editor.
- Template editor — Drag Presets, Layout, and Header Elements or Footer Elements blocks; configure with Style, Attr, and Events in the right sidebar (interactions: Page editor events and interactions).
- Site layout — Optional theme-wide presets that affect overall header/footer styling.
Interface architecture
[Settings → Navigation]
→ menu items (data for Navigation Menu blocks)
[Settings → Header & Footer → Edit header or footer]
→ Template editor canvas (header OR footer region)
→ Right sidebar: Edit | Layers | Blocks
Blocks panel: Presets, Layout, Header/Footer Elements
→ Save template → applies to all pages using that default
Page body content still comes from Pages → Edit — see Editor blocks and layout reference.
Part 1 — Navigation menu (Settings → Navigation)
Use this when you need to add, remove, or reorder links that appear in navigation blocks.
Implementation steps
- Open Settings → Navigation.
- Add items pointing to published pages or external URLs.
- Drag to reorder.
- Save.
Navigation Menu block (in the header template editor)
When you place a Navigation Menu block in a header template, open Attr and choose which saved menu this block uses (data-menu-id). At publish time, ArtInStack injects the live links from Settings → Navigation—you do not hand-type each link inside the template for that block.
Dynamic navigation presets (Minimal, Centered, Split, Modern headers) can auto-build preview links from pages; published output still respects your menu configuration.
If a menu link 404s for visitors
Link only to published pages. Draft pages are not reachable for signed-out visitors.
Part 2 — Header & footer template editor
Open the editor
- Settings → Header & Footer.
- Select a header or footer template (or create one).
- Click Edit.
You see a compact canvas (header band or footer band) and the same right sidebar workflow as pages: Edit / Layers / Blocks, then Style, Attr, Events under Edit.
How the template canvas differs from pages
| Page editor | Header/footer template editor | |
|---|---|---|
| Canvas root | Full page | Single <header> or <footer> region |
| Block library | Heroes, galleries, products, … | Header-only or footer-only blocks |
| Structure | Multiple sections common | Usually one section → rows → columns |
| Save | Per page | Per template (applies wherever that template is used) |
Changes to a shared default header or footer affect every page that uses it—preview on homepage and one interior page before wide edits.
Layout blocks (both header and footer)
Available under Blocks → Layout (same idea as pages: section → row → column).
| Block | Use for |
|---|---|
| Section | The header or footer band; height and vertical padding in Attr |
| Row | Horizontal layout; max width, gap, column layout |
| Spacer | Fixed vertical gap between rows |
Use Layers when you need to select a row or section under other content.
Header template — Presets
Quick starts under Blocks → Presets (header editor only):
| Preset | Typical layout |
|---|---|
| Minimal Header | Logo left, desktop nav + mobile menu button right |
| Centered Header | Logo row + centered nav row below |
| Split Header | Logo, centered nav, utilities in three columns |
| Modern Header | Logo, nav, CTA/social-friendly split |
Presets include mobile menu placeholders; mobile nav links are filled at publish to match your live menu.
Header template — Elements
Under Blocks → Header Elements:
| Block | Use for |
|---|---|
| Logo | Image from Media or placeholder; height in Attr |
| Site Title | Text studio name beside or instead of logo |
| Navigation Menu | Horizontal menu wired to a menu from Settings → Navigation |
| Nav Link | Single manual link (custom label + URL) |
| CTA Button | Prominent button (style/size in Attr) |
| Social Icons | Icon row with networks configured in Attr |
| Cart | Storefront cart icon when commerce is enabled (color/size in Attr) |
Configure logo image, menu id, CTA URL, and social URLs in Attr after selecting the block.
Footer template — Presets
Under Blocks → Presets (footer editor only):
| Preset | Typical layout |
|---|---|
| Simple Footer | Copyright left, social right |
| Stacked Footer | Centered logo, links, social, copyright |
| Multi-Column Footer | Several columns for links and text |
| Newsletter Footer | Signup-focused layout with columns |
Footer template — Elements
Under Blocks → Footer Elements:
| Block | Use for |
|---|---|
| Footer Columns | Multi-column shell for link groups |
| Footer Column | One column inside the grid |
| Footer Logo | Smaller logo treatment for footer |
| Copyright | Auto-year text pattern (© {year} …) in Attr |
| Social Links | Footer social icon row |
| Newsletter | Email capture UI (heading, webhook, and copy in Attr) |
| Terms & Conditions | Link to terms or privacy page |
Site layout and page overrides
- Settings → Site layout — Theme presets that may affect header width or footer tone site-wide.
- Pages → Edit → Page Settings — Per-page header/footer template override: Page settings and overrides.
- Quick checklist: Template manager · Deep dive: Working with page templates.
Troubleshooting & common pitfalls
| Issue | What to check |
|---|---|
| Menu looks wrong on live site | Navigation tab order + which menu the Navigation Menu block references in Attr |
| Header changed everywhere after one edit | Expected—default header template is shared; use page override for one landing page |
| Block panel missing heroes/galleries | You are in the template editor; those blocks live in the page editor only |
| Mobile menu empty | Save header template; confirm Navigation has items; republish a page |
Next steps & validation
- Add at least three items under Settings → Navigation.
- Edit default header → apply Minimal Header preset → set Logo → wire Navigation Menu to your menu in Attr → Save.
- Edit default footer → apply Simple Footer → update Copyright and Social Links → Save.
- Open two public URLs and confirm the same chrome appears.