Build a Header Template

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 shortcodes or extra code needed.

Create a Header Template

1. Go to UiChemy → Theme Builder.
2. Click + Add New → Header.
3. It opens for editing in Gutenberg by default. 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:

<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.

CSS Example

.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 Site.
4. Click Save.

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.

Tips

• Sticky headers, use position: sticky; top: 0; z-index: 1000; in the CSS panel, the widget's auto-scoped CSS scopes it correctly.
• Logo size, use site.logo.src instead of hardcoding an image URL, it stays correct if you change your logo in WordPress Settings → General.
• Navigation menu, set the active menu in Appearance → Menus. <uichemy-nav-menu> always renders whichever menu is marked as primary.
• Theme conflict, 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.

Related