Template TypesBuild A Header Template

Build A Header Template

How to create a custom site-wide header using the Protuno Theme Builder and Proton widget, with navigation, logo, and responsive layout.

A Header template replaces your theme's default header across your entire site, or on specific pages you choose. You design it once using the Proton widget, assign display conditions, and it renders on every matching page without plugin shortcodes or code.

Header templates are available in all Protuno plans, Free and Pro. Archive, search, and WooCommerce template types require Protuno Pro.

Create A Header Template

  1. Go to Protuno → Theme Builder
  2. Click + Add New → Header
  3. Elementor opens with a blank canvas
  4. Drag the Proton widget onto the canvas
  5. Build your header (see below)
  6. Click Update to save
  7. Set display conditions

Build Your Header

In the Proton widget, click Edit With AI and describe your header:

"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 pr-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. The site.logo.src and site.name values come from the Twig site provider.

site.* requires Protuno 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> structural tag which renders the site logo without Twig.

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 landing pages, create a second Header template with a more specific condition, it takes priority over the site-wide one.

Common patterns:

ScenarioConditions
Site-wide except checkoutInclude: Entire Site · Exclude: Single Page → Checkout
Different header for blogCreate second header: Include: All Posts
Landing page, no headerExclude: Single Page → [landing page] on the main header

Tips

Sticky headers: Use position: sticky; top: 0; z-index: 1000; in the CSS panel. The auto-scoped widget CSS will scope this correctly.

Logo size: Use the site.logo.src Twig expression rather than hardcoding an image URL, it stays correct if you change your logo in WordPress Settings → General.

Navigation menu: Set the active navigation menu in Appearance → Menus. The <uichemy-nav-menu> tag always renders the menu currently marked as the primary nav.

Theme conflict: If your theme renders its own header even after you activate a Protuno header, check your theme settings for a "header" toggle, or use the theme's option to disable its built-in header.

Was this page helpful?