Configure your site header

In short. Go to Appearance → Theme Editor → Header to swap your logo, set up to two CTA buttons, toggle sticky and transparent-over-hero behaviour, and optionally enable a topbar promo strip. Changes apply sitewide on the next page load — no rebuild step. Navigation links are managed separately in Appearance → Menu.

On this page: What this panel covers · Fields reference · Steps · Common scenarios · Troubleshooting · Related panels

How to edit your site 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 on your SGEN site — your logo, the main nav, CTA buttons, and how the header behaves when the visitor scrolls.

What is this for?

The site header is the first thing every visitor sees, on every page. The Header panel is the site-wide skin editor for that bar — branding changes (logo swap, CTA text rewrite) and behaviour toggles (sticky, transparent-over-hero, optional topbar promo strip). It is not the place to build the navigation menu itself — the list of links shown in the header is owned by the Menu panel, and the header pulls in whichever menu has "Header" ticked as its location.

A typical save writes five or six fields at once. After saving a rebrand, the panel summary shows:

The Header panel works hand-in-hand with three other panels — Themes (palette), Menu (link list), Styles & Layouts (typography + button shape). Edits in any of those four show up in the public site header automatically; this doc covers the four fields the Header panel itself owns.

Scope

The Header panel covers: logo (image + link target), Primary CTA (text + URL), Secondary CTA (text + URL), sticky scroll toggle, sticky-mobile toggle, transparent-over-hero toggle, and the optional Topbar (enabled, message, CTA text, CTA URL, background colour, text colour). It does not cover the list of navigation links — those live in Appearance → Menu. It does not cover the header's palette (that's Themes / Color Swatches) or button shape (that's Styles & Layouts). The Header panel saves all thirteen fields as a single config blob on each Save — partial-field saves replace everything.

Examples

Worked example: logo swap after a rebrand. Open the Logo row, click Choose Image, pick the new file from the Media Library, click Save Changes. Every page's header shows the new logo on next load — home, blog, shop, product detail.

Populated form after the swap:

On save:

The public site renders the updated header:

Other common scenarios:

Fields

The Header panel exposes nine editable fields plus four behaviour toggles. Most teams only touch four or five of them on a given save.

Two more rows on the form — Topbar background colour and Topbar text colour — accept a hex string (#6F4E37, #FFFFFF) and only render when Topbar enabled is on. Field IDs in the saved config map one-to-one: header_logo, header_cta_1, header_cta_2, header_sticky, header_sticky_mobile, header_transparent_over_hero, topbar_enabled, topbar_message, topbar_cta_text, topbar_cta_url, topbar_bg, topbar_color. The save-flash banner names exactly which of these wrote so you can confirm the change stuck.

Generated CSS variables (read these from Custom CSS)

Header config writes the same variables Styles & Layouts uses, plus a small set of header-only ones. Use these names in Custom CSS when you need a one-off override that the panel can't express — per-template hover states, breakpoint-specific opacity, or animation curves.

:root { /* Logo + link */ --header-logo-url: url('/media/yourstore-wordmark-2026.png'); --header-logo-max-height: 48px; --header-logo-link: '/'; /* Primary CTA */ --header-cta-primary-label: 'Shop beans'; --header-cta-primary-url: '/shop'; --header-cta-primary-bg: var(--color-primary); --header-cta-primary-color: #ffffff; /* Secondary CTA */ --header-cta-secondary-label: 'Subscribe'; --header-cta-secondary-url: '/subscribe'; --header-cta-secondary-bg: transparent; --header-cta-secondary-color: var(--color-primary); /* Behaviour */ --header-sticky: 1; --header-sticky-mobile: 0; --header-transparent-over-hero: 1; /* Topbar (optional) */ --topbar-enabled: 0; --topbar-bg: #6F4E37; --topbar-color: #ffffff;}

A practical override pattern: pin the Primary CTA's hover colour without abandoning the swatch system.

/* Pin your primary CTA hover, regardless of which swatch is active */.site-header .btn-primary:hover { background: #5A3E2B; color: #ffffff; transform: translateY(-1px);}/* Subtle shadow when the header is sticky and scrolled past the hero */.site-header.is-stuck { box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08); transition: box-shadow .2s ease-out;}/* Tighter header on phone — drop logo height + CTA padding at the small breakpoint */@media (max-width: 575px) { .site-header { --header-logo-max-height: 36px; } .site-header .btn-primary, .site-header .btn-secondary { padding: 6px 12px; font-size: 13px; }}

The .is-stuck class is added by SGEN's runtime when the sticky header crosses the hero boundary — use it for any sticky-only styling. The @media block is the standard way to trim header weight on phones without rebuilding the panel; the variable from Header config still wins, you're just narrowing it for one breakpoint.

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. The Header panel itself has no menu editor — looking for one means you're on the wrong tab.
• Do not expect partial edits to preserve other header fields. Header config saves as a full replacement — if a field on the form is blank when you click Save Changes, it is saved as blank. Always edit through the admin UI and let the form finish filling in before you click Save Changes.
• 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. The Header panel's CTA colours are derived tokens — they don't live as standalone hex values you can paste in.
• Do not paste raw <nav> HTML into the header logo or CTA fields. The sanitiser strips inline navigation markup. Build menus through Appearance → Menu instead.
• Do not script header saves from a cold form. The header POST replaces the entire config blob, so a script that posts only the changed field will null out everything else. Always edit through the admin UI which hydrates every field before serialising.
• Do not use Header to set per-page logos. The header is sitewide — there's one logo for every page. If a campaign page needs a different lock-up, build it as a hero block on that page and hide the header on that page via Custom CSS scoped to body.page_id-N.
• Do not paste <script> tags or analytics snippets into the topbar message. The sanitiser strips them. Use Appearance → Custom Codes for tracking pixels and analytics.

How this connects to other features

• Media Library — your logo lives in Media; the Header picks a reference, not a file. Upload your wordmark first (Media → Upload Files, with WebP + Compression toggled on), then point the Header at it.
• Menu — the navigation links shown in the header are built separately under Appearance → Menu. Tick "Header" as a menu location for that menu to appear in the header. Multiple menus can compete for the Header location; the one most recently saved with Header ticked wins.
• Themes — the header's palette is overridden by the active Color Swatch. A swatch change repaints the header even if you did not touch Header config. The active swatch's primary colour becomes the Primary CTA background; its background colour becomes the header's solid (non-transparent) background.
• Templates — the active Desktop Nav template is the outer shell the Header config renders into. Switching templates can change the header's HTML structure (logo-left vs centred wordmark, single-row vs split-row with topbar). The fields you set here get re-arranged into whichever template shape is active.
• Styles & Layouts — typography, button radius, padding, container max-width all flow into the header. Tune those in Styles & Layouts; the header inherits them. Changing Body font in Styles & Layouts changes the header nav font too.
• Custom CSS — for header rules that this panel can't express (per-template overrides, hover states, animations, breakpoint-specific opacity), write them in Custom → CSS and target .site-header or body.page_id-N .site-header for page-specific scopes.
• Mobile Menu — the Mobile Menu panel is a separate tab in the Theme Editor. The header's hamburger button is the trigger; the drawer that opens is the Mobile Menu. Edits here do not propagate to the mobile drawer.
• Custom Codes — analytics snippets and tracking pixels (Google Tag Manager, Meta Pixel, etc.) belong in Custom Codes, not the topbar. The topbar message is plain text only.

Before you start

• You are signed in to SGEN as an admin with Appearance access.
• Your new logo is uploaded to the Media Library (or you are ready to upload it). Recommended: transparent PNG, 320×80, under 50 KB. Toggle WebP + Compression on the Upload form before you click Upload Files — defaults are unoptimised.
• You know your menu for the header is already built under Appearance → Menu (or you will build it after). The Header panel does not edit menus; it consumes whichever one is tagged as the Header location.
• You have your CTA destination URLs ready (/shop, /subscribe, /signup, etc.) — fewer mid-edit context switches that way.
• If you plan to flip Sticky or Transparent over hero, you have a long page handy to test scroll behaviour and a hero page handy to test the over-hero look.
• If you plan to enable the Topbar, you have your final promo copy and CTA URL signed off — don't ship draft copy on the topbar; it sits above every page on the site.

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:

The Header tab is selected by default. The other seven tabs are siblings — clicking any of them swaps the panel below; the tab bar itself stays put. Switch back to Header any time by clicking the first tab.

Steps

1. Swap the logo

In the Logo row, click Choose Image. The Media Library modal opens. Pick your logo from the existing library or upload a new one (toggle WebP + Compression on the Upload form before clicking Upload Files for an optimised file). Click Select; the modal closes and the preview in the Logo row updates in place.

Recommended size: 320×80 px on a transparent background. Anything larger gets clamped to fit the header bar; anything smaller gets up-scaled and looks soft. Keep the file under 50 KB after compression — the logo loads on every page, and a heavy logo file noticeably hurts page load.

If the logo needs to point somewhere other than home (rare — typically /), edit the Logo link target field below it. Leave it as / unless you have a specific reason.

2. Update CTA buttons

Below the nav, SGEN ships two header CTAs by default. Edit the button text and URL for each. Leave a field blank to hide that CTA — but clear the URL too, otherwise the empty button keeps a click target.

The Primary CTA picks up --color-primary from your active swatch; the Secondary is outlined / link-styled by default. Use Styles & Layouts → Button Styles to change either button's shape (radius, padding, hover behaviour) — those edits cascade into the header automatically.

If you only want one CTA, clear the Secondary CTA text and Secondary CTA URL fields. The header layout reflows so the Primary CTA sits flush against the right edge.

3. Toggle sticky / transparent / topbar / other behaviours

• Sticky — the header pins to the viewport top on scroll. Visitors keep nav + CTAs visible while reading. Good for long pages (blog posts, knowledge base articles); add some weight to it via the .is-stuck CSS class hook described above.
• Sticky on mobile — separate toggle. Some brands want sticky on desktop only because mobile screen real-estate is tighter. If you flip Sticky on but leave Sticky on mobile off, desktop visitors get sticky and phone visitors get a regular scrolling header.
• Transparent over hero — the header starts transparent on home/landing pages with a hero image, then becomes opaque when the visitor scrolls past. To limit this to specific pages, add a CSS rule (body:not(.page_id-N) .site-header { background: var(--color-background); }) — by default, transparent applies wherever a hero block is the first section on the page.
• Topbar — a thin promo strip above the main header. Useful for time-bound campaigns; flip it off when the campaign ends. The Topbar accepts plain text, one CTA, and two colour fields (background + text). Anything richer than that needs Custom CSS.

4. Save Changes

The new header renders on every public page on next load. Hard-reload (Ctrl+Shift+R) once if your CDN cached the previous CSS — the swap is otherwise immediate.

What success looks like

• The public site reloads with the new logo and CTAs in place on every page (home, blog index, blog post, shop, product detail, account, custom pages).
• The sticky toggle (if flipped) visibly pins the header as you scroll on a long page — open any long blog post and scroll; the header stays glued to the top.
• The transparent toggle (if flipped) renders a transparent header over hero blocks on the home page; the header becomes opaque once you scroll past the hero. The wordmark sits cleanly on the hero background.
• The topbar (if flipped on) shows a thin coloured strip above the main header with the promo message and CTA. Click the topbar CTA — it routes to the URL you set.
• Re-opening the Header panel shows your saved values populated in every field. The logo preview shows the saved image; the CTA fields show the saved text and URL; the toggles read in their saved positions. (See the troubleshooting note below for one quirk on the toggle row.)
• The save flash banner names which fields wrote — header_logo, header_cta_1, header_cta_2, header_sticky, header_transparent_over_hero for a typical header save.

What to do if it does not work

• My logo did not update on the public site. Hard-reload (Ctrl+Shift+R). Also verify the correct image is selected in the Logo row — the picker keeps the previous selection visible if you cancel the modal mid-pick. If it still shows the old logo after a hard reload, confirm the file you uploaded is the new wordmark (Media Library → click the file → check the preview); occasionally a wrong file gets picked from a similar filename.
• The CTA I hid still shows up. Clear the button URL as well as the text — an empty URL can fall back to a default link. Save again after clearing both. The header layout reflows once the empty CTA is fully cleared.
• A toggle (sticky, transparent, topbar) appears off but the behaviour is still on. This is a known display-only quirk on the form re-render. The toggle reflects the saved state on the next reload — save the page once with your intended state and re-open it; the toggle will read correctly. The behaviour on the public site is always driven by the saved state, not the toggle's visual position. If you're unsure what the saved state is, look at the public site or the save-flash banner from the last save (it lists the saved fields by name).
• Saving partial header edits wiped other header fields. Header config saves as a full replacement. Always edit through the admin UI — it hydrates every field from the saved config before letting you click Save Changes. If fields look wiped after a save, re-enter them and Save again. Don't drive header saves from a cold script that posts only the changed field — that path will null out the others.
• My topbar promo bar is showing on every page including checkout. Header config is sitewide. To hide the topbar on a specific page, add a Custom CSS rule scoped to that page: body.page_id-12 .site-topbar { display: none; }. Use the page's numeric id, not its slug — the slug class disappears when a page is set as the homepage.
• The transparent header is unreadable on the shop page. The shop page's first section is white, not a dark hero — transparent on top of white = invisible logo. Add body:not(.page_id-1) .site-header { background: var(--color-background); } in Custom CSS to force opaque everywhere except the home page.
• The header looks correct in the editor preview but wrong on the live site. The editor preview uses the active template; the live site uses whichever template is set as Active under Appearance → Templates. If those drifted (e.g. you changed the active template recently), re-pick the right template and Save Changes there too.
• My logo is sharp on desktop but blurry on retina mobile. Upload a 2× version (640×160 instead of 320×80) and let the browser scale down. The clamp from the header CSS keeps the visual size correct; the higher-density file means crisp rendering on retina screens.
• The topbar background colour I picked looks washed out on the public site. The hex you typed is correct; what you're seeing is the topbar text colour blending into the background. Pick a text colour with at least 4.5:1 contrast against the background — for #6F4E37 brown, white (#FFFFFF) clears the bar; mid-greys won't.

Next step

• Pick a theme (color swatches + 8 chrome slots)
• Configure the footer (columns + widgets)
• Configure the mobile menu (drawer)
• Customize global styles (typography, colors, buttons, layout, accessibility)
• Build a navigation menu (menu builder + locations)
• Manage widgets (paragraph, image, embed, code)
• Use shortcodes (SGEN Documentation etc.)