Configure the header

How to edit your site's header (logo, navigation, CTAs, sticky behaviour)

The Header panel is the Theme Editor's landing tab. It controls the bar that sits on top of every public page — your logo, the main nav, CTA buttons, and how the header behaves when the visitor scrolls.

What is this for?

Header config is the site-wide header skin editor. Use it for branding changes (logo swap, CTA text rewrite) and header behaviour toggles (sticky, transparent-over-hero). It is not the place to build the navigation menu itself — the list of links in the header is owned by the Menu panel.

Good use cases

Example 1: Swap the logo after a rebrand. Acme Coffee Roasters redesigns its wordmark. Open the Logo row, click Choose Image, pick the new acme-wordmark-2026.png from the Media Library, Save Changes. Every page's header shows the new logo on next load.

Populated form for Acme after the swap:

On save:

And the public site renders the new header:

Example 2: Change CTA wording. "Book a Demo" becomes "Start Free Trial". Edit the button text to Start Free Trial, update the destination URL to /signup, Save Changes.

Example 3: Make the header sticky on scroll. Flip the sticky toggle, Save Changes. The header stays pinned to the viewport top as visitors scroll on every page.

What NOT to use this for

• Do not use Header to add or reorder navigation links. The nav list shown in the header is owned by Appearance → Menu. Edit it there, tick "Header" as a location, save.
• Do not expect partial edits to preserve other header fields. Header config saves as a full replacement.
• Do not hand-edit the header to change the overall palette. Header colours inherit from the active theme's swatch. Change the palette in Themes or Styles & Layouts, not here.

How this connects to other features

• Media Library — your logo lives in Media; the Header picks a reference, not a file.
• Menu — the navigation links shown in the header are built separately under Appearance → Menu.
• Themes — the header's palette is overridden by the active Color Swatch.
• Templates — the header wrapper template is the outer shell the Header config renders into.

Before you start

• You are signed in to SGEN as an admin.
• Your new logo is uploaded to the Media Library.
• You know your menu for the header is already built under Appearance → Menu.

Where to go

1. Open the left navigation.
2. Click Appearance → Theme Editor. The page opens on the Header tab. The eight-tab bar sits at the top:

Steps

1. Swap the logo

In the Logo row, click Choose Image. Pick your logo from the Media Library or upload a new one.

2. Update CTA buttons

Below the nav, SGEN ships two header CTAs by default. Edit the button text and URL for each.

3. Toggle sticky / transparent / other behaviours

• Sticky — header pins to viewport top on scroll.
• Transparent over hero — header starts transparent on home/landing pages with a hero image.

4. Save Changes

What success looks like

• The public site reloads with the new logo and CTAs.
• The sticky toggle (if flipped) visibly pins the header as you scroll.

What to do if it does not work

• My logo did not update on the public site. Hard-reload (Ctrl+Shift+R).
• The CTA I hid still shows up. Clear the button URL as well as the text.
• Saving partial header edits wiped other header fields. Use the admin UI to hydrate every field before serialising.

Next step