# Customize the header and footer

_Category: Design and templates_

Your header and footer frame every page: your logo, menu, search and language picker at the top, and your links, social icons and credits at the bottom. Set them up once and they show across your whole help center.

**Who can do this:** Owners and Admins (Editors through **Customize** on your help center) · **Plans:** All plans. The language switcher needs more than one language (Growth and Catalyst plans).

## Edit the header

1. In the template editor, open **Pages**, pick a page, and click the **Header** region. The note at the top of the region says whether your changes show on every page or on this page only (see "One header and footer for every page" below).
2. Click the component you want to change: **Logo**, **Navigation**, **Search bar** or **Language switcher**. Use **Add component** to add one that's missing.
3. Change its settings. Use **Position** to arrange the row (see below).
4. Click **Publish**.

### Header components

- **Logo** shows the logo or site name from the **Brand** tab. **Variant** picks **Logo image** or **Brand name (text)**, and **Link target** sends clicks to your **Help center home** or **Your main website**. See [Add your logo, favicon and brand name](https://self.helpcenter.io/content/logo-and-brand).
- **Navigation** shows the links you add in the **Navigation** tab. **Variant**: **Horizontal**, **Vertical (sidebar)** or **Pills**. See [Add links to your header and footer](https://self.helpcenter.io/content/navigation-links).
- **Search bar** lets visitors search from every page. See [Customize the hero and search bar](https://self.helpcenter.io/content/hero-and-search).
- **Language switcher** lets readers change language. **Variant**: **Dropdown** or **Inline list**. **Label style** shows the language's name, its name plus the native name, or its code. It lists your default language and every language with at least one published translation.

### Arrange the header row

Logo, Navigation, Search bar and Language switcher each have a **Position**: **Own row (block)**, or inline on the left, in the center or on the right. Inline components next to each other share one row, such as a logo on the left with the menu and language switcher on the right. In the region's list, they're grouped as **Inline row 1**, **Inline row 2** and so on.

## Edit the footer

1. In **Pages**, click the **Footer** region, then the **Footer** component.
2. Under **Footer columns**, click **Brand**, **Links**, **Text**, **Social** or **HTML** to add a column. Until you add one, the footer shows your site name, tagline and navigation links.
3. Click a column to fill it in. Reorder columns with the arrows, or remove one with the trash icon.
4. Set **Columns** to how many columns sit side by side on larger screens (1 to 4).
5. To hide "Powered by HelpCenter.io", open **Advanced** and turn off **Show attribution**.
6. Scroll the preview to the bottom to check your footer, then click **Publish**.

![Screen recording. Open the Footer region and edit the Footer. Scroll the preview down to your footer. Under Advanced, turn off Show attribution.](https://helpcenter-io.s3.amazonaws.com/uploads/self/8QAyHpIAXkqGTsTAJJ4ury69ZFdGiZQEsC0qMN0r.gif)
Edit the footer and turn off the attribution line.

| Column | What it holds |
| --- | --- |
| **Brand** | Your site name and tagline from the **Brand** tab. |
| **Links** | A **Column title** and a list of links. Each link goes to the **Home page**, a **Category**, an **Article** or an **External URL**. Click **Add link** for more. |
| **Text** | A **Column title** and a paragraph of text. |
| **Social** | Icons that link to your social profiles. Paste each profile's full link, and leave a field empty to hide its icon. |
| **HTML** | Your own HTML for the column. |

Removing the attribution works on every plan. See [Remove "Powered by HelpCenter.io"](https://self.helpcenter.io/content/remove-powered-by).

## Social links

For a row of social icons outside the footer columns, add the **Social links** component to your footer, header or Utility region. Fill in the networks you use (Twitter, LinkedIn, GitHub, Facebook, Instagram and YouTube) with your handle, such as company/acme for LinkedIn, or paste your profile link. Each icon always links to that network's own site, and empty fields don't show.

## One header and footer for every page

A region marked **Synced across all pages** is the same everywhere: a change you make on one page shows on every page. Footers usually start synced. Headers start synced only where the theme gives every page the same header. Compass, for example, adds a search bar to the header of category and article pages, so each page starts with its own header.

While you edit a component, the label next to its name shows how far the change reaches: **All pages**, or one page, such as **Home only**.

- To sync a region whose pages are separate, open it on the page whose version you want, click **Apply this header to other pages** and then **Keep in sync everywhere**.
- If the region says **Not the same on every page**, click **Choose**, then **Keep separate headers** or **Use this header everywhere**. Until you choose, an edit changes only the page you make it on.
- To stop syncing, click **Manage** and choose **Give each page its own setup**.

Syncing replaces the region on the other pages with the one you're looking at. You can undo it with ⌘Z. See [Pages, regions and shared headers explained](https://self.helpcenter.io/content/pages-and-regions).

## Troubleshooting

**The menu in my header is empty.** The Navigation component shows the links from the **Navigation** tab. Add your links there.

**The language switcher is missing.** It needs a second language with at least one published translation. On a help center with one language, themes leave it out: add it with **Add component** once you have a second language.

**My header change shows on one page only.** The header isn't synced, or its pages differ. Make the change on each page, or sync the header first (see "One header and footer for every page" above).

**Syncing the header removed something from my other pages.** The page you synced from had a different header, and it replaced the others. Press ⌘Z, or add the missing component back: the change syncs to every page.

**A block I added to the Compass header is squeezed in beside the logo.** Compass now gives each block you add to the header a line of its own: above the logo row when you place it before the Logo, below it when you place it after the search and other tools. Help centers that applied Compass before this change keep the theme's earlier Custom CSS. To get the new behavior, open **Theme gallery**, click **Compare & apply…** on Compass, untick everything except **Custom CSS** and click **Apply theme**, then publish. This replaces the CSS under **Advanced** → **Custom CSS** with the theme's, so copy any CSS you added yourself first and paste it back afterwards.

**My logo links to the help center, not my website.** Fill in **Your main website** under **Brand**, and set the Logo's **Link target** to **Your main website**.

## Related articles

- [Add links to your header and footer](https://self.helpcenter.io/content/navigation-links)
- [Remove "Powered by HelpCenter.io"](https://self.helpcenter.io/content/remove-powered-by)
- [Pages, regions and shared headers explained](https://self.helpcenter.io/content/pages-and-regions)