Header, footer, and navigation
Configure menus in Settings, then design header and footer templates in a dedicated visual editor with layout presets, navigation blocks, and footer elements on ArtInStack.
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.