# Header and Footer

> Build your site's header and footer in the same visual builder - settings-bound Menu and Logo elements, sticky options, and mobile navigation.

The header and footer are not hardcoded templates - they are sections you edit in the same builder as your pages. Each site stores one header and one footer, built from the same Sections, Rows, Columns, and elements, plus two settings-bound elements made for the job: **Menu** and **Logo**.

---

## Opening the Header or Footer Builder

1. Open the site's pages list in the portal
2. Choose the header (or footer) edit entry
3. The builder opens in a focused single-section mode: you are editing just the header (or footer) section, not a page

Everything you know from the page builder applies - the Inspector, native fields, undo, and the device preview.

---

## The Menu Element

The Menu renders your site navigation. It is bound to the navigation items defined in [Site Settings](/docs/help/site-settings), so you manage the actual links in one place and the Menu element decides how they look in the header.

| Field | Options |
|-------|---------|
| **Alignment** | Left, Center, Right |
| **Item Gap** | Default, Small, Medium, Large |
| **Mobile Hamburger** | Collapse the menu into a hamburger on phones |
| **Mobile style** | Default dropdown, or **Slide-in drawer** (off-canvas panel with overlay) |
| Color style | Default, Primary, Secondary, Muted, Dark, Light |

Nested navigation items render as hover dropdowns on desktop and expand inside the mobile menu.

---

## The Logo Element

The Logo element renders the logo image and site name from Site Settings - swap the logo file once and every page updates. Configure its **Link** (usually home), **Max Height** / **Max Width**, and **Alignment**. See [Media Elements](/docs/help/media-elements#logo).

---

## Sticky Header

The header builder has a **Sticky header** toggle that keeps the header pinned to the top of the viewport as visitors scroll. Its scope can be:

- **Off** - the header scrolls away normally
- **All devices** - pinned everywhere
- **Mobile only** - pinned on phones, normal on desktop (useful when the desktop design wants a tall header but mobile users need the menu and call button in reach)

---

## A Typical Header Build

1. One Section (the header band), one Row: **Fixed-Left** layout or Halves
2. Left column: a **Logo** element
3. Right column: a **Menu** element, alignment Right
4. Optional: a Button element with your main CTA after the Menu
5. Toggle **Sticky header** on, scope to taste
6. Save

### A Mobile Call Bar

Combine features you already know:

1. In the header, add a second Row (or Section content) with **Show on: Mobile only**
2. Put **Click to Call** and a quote Button in it
3. Set sticky scope to **Mobile only**

Desktop visitors see a clean header; phone visitors always have the call button on screen.

---

## Fallback Chrome

If a site has no built header or footer yet, published pages fall back to a clean default generated from Site Settings (logo, site name, navigation items). That means a brand-new site is never chrome-less - but once you want design control, build the real thing here.

---

## Going Live

The header and footer are content, exactly like pages: saving them updates the CMS, and the live site changes only on the next manual **Deploy**. Since the header appears on every page, give it a quick check in the deploy preview before shipping.

---

## Summary

| Task | How |
|------|-----|
| Edit navigation links | Site Settings (the Menu element renders them) |
| Change the logo everywhere | Site Settings logo (the Logo element renders it) |
| Pin the header | Sticky header toggle: All / Mobile only |
| Off-canvas mobile menu | Menu: Mobile style, Slide-in drawer |
| Mobile-only call bar | Mobile-only Section + Click to Call + sticky Mobile only |

---
Source: https://seedlysites.com/docs/help/header-footer