> For the complete documentation index, see [llms.txt](https://docs.uichemy.com/llms.txt).
> Use it to discover all available pages before exploring further.

# Build a Header Template

Create a custom site-wide header with the Composer widget: navigation, logo, and a responsive layout.


A Header template replaces your theme's default header across your entire site, or on specific pages you choose. Design it once with the Composer widget, assign display conditions, and it renders on every matching page, no per-page setup needed.

<Callout kind="info">
Header templates are available on **Free and Pro**. Archive, search, and WooCommerce template types require **Pro**. See [Free vs Pro](/uichemy-composer/getting-started/free-vs-pro).
</Callout>

### Create a Header Template

1. Go to **UiChemy → Theme Builder**.
2. Click **+ Add New → Header**.
3. It opens in the WordPress editor (Gutenberg) by default, or in Elementor if it's installed and you choose it. Use **Edit** on the template card to reopen it later.
4. Add the **Composer** widget to the canvas.
5. Build your header (see below).
6. Click **Update** to save.
7. Set display conditions.

### Build Your Header

Click **Edit With AI** *(Pro)* and describe your header, for example:

> "A sticky header with the site logo on the left, main navigation links centered, and a 'Get Started' CTA button on the right. White background, dark text, thin bottom border. On mobile, collapse the navigation to a hamburger menu."

Or click **Edit Code** to write the HTML directly:

```html
<header class="site-header">
  <div class="header-inner uc-boxed">
    <a href="{{ site.url }}" class="site-logo">
      <img src="{{ site.logo.src }}" alt="{{ site.name }}">
    </a>
    <nav class="header-nav">
      <uichemy-nav-menu></uichemy-nav-menu>
    </nav>
    <a href="/get-started" class="btn-primary">Get Started</a>
  </div>
</header>
```

The `<uichemy-nav-menu>` tag outputs the active WordPress navigation menu. `site.logo.src` and `site.name` come from the Twig `site` provider.

<Callout kind="warning">
`site.*` requires UiChemy Pro. In the free version, `{{ site.url }}`, `{{ site.logo.src }}`, and `{{ site.name }}` return empty strings. Free users can hardcode the logo image URL and site URL directly in the HTML, or use the `<uichemy-site-logo>` tag, which renders the site logo without Twig.
</Callout>

### CSS Example

```css
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: white;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.site-logo img {
  height: 36px;
  width: auto;
}

.header-nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

@media (max-width: 768px) {
  .header-nav {
    display: none;
  }
}
```

### Display Conditions

For a site-wide header:

1. Open **Conditions** for the template.
2. Click **+ Add condition**.
3. Choose **Include → Entire Website**.
4. Click **Save Conditions**.

To use a different header on the shop or a landing page, create a second Header template with a more specific condition, it takes priority over the site-wide one.

| Scenario | Conditions |
|---|---|
| Site-wide except checkout | Include: Entire Website · Exclude: Single Page → Checkout |
| Different header for blog | Create second header: Include: All Posts |
| Landing page, no header | Exclude: Single Page → [landing page] on the main header |

### Tips

<ExpandableGroup>
  <Expandable title="Sticky headers" default-open="false">
    Use `position: sticky; top: 0; z-index: 1000;` in the CSS panel, the widget's auto-scoped CSS scopes it correctly.
  </Expandable>
  <Expandable title="Logo size" default-open="false">
    Use `site.logo.src` instead of hardcoding an image URL, it stays correct if you change your logo in WordPress Settings → General.
  </Expandable>
  <Expandable title="Navigation menu" default-open="false">
    Set the active menu in **Appearance → Menus**. `<uichemy-nav-menu>` always renders whichever menu is marked as primary.
  </Expandable>
  <Expandable title="Theme conflict" default-open="false">
    If your theme still renders its own header after you activate a UiChemy header, check your theme settings for a header toggle to disable it.
  </Expandable>
</ExpandableGroup>

### Frequently Asked Questions

<ExpandableGroup>
  <Expandable title="Why does my header show twice?" default-open="false">
    Another theme builder, such as Elementor Pro or Nexter, also has a header active. Keep the header active in only one of them. The Theme Builder shows a warning when it detects another theme builder.
  </Expandable>

  <Expandable title="How do I hide the header on one landing page?" default-open="false">
    Open **Conditions** on your main header and add **Exclude → Specific page / post →** your landing page, then click **Save Conditions**.
  </Expandable>

  <Expandable title="Why are my logo and site name blank?" default-open="false">
    The site logo, name, and URL tags need **UiChemy Pro**. On the free plan they come out empty, so add your logo image and links directly in the HTML instead.
  </Expandable>
</ExpandableGroup>

### Related

<Columns cols={2}>
  <Card title="Creating Templates" href="/uichemy-plugin/theme-builder/creating-templates">
    See the general template-creation flow this builds on.
  </Card>
  <Card title="Assigning Conditions" href="/uichemy-plugin/theme-builder/assigning-conditions">
    Narrow down where this header actually shows.
  </Card>
  <Card title="Build a Footer Template" href="/uichemy-plugin/theme-builder/footer-template">
    Pair your header with a matching footer.
  </Card>
  <Card title="Twig" href="/uichemy-composer/design-data/twig">
    Add dynamic data to your header markup.
  </Card>
</Columns>