Kntnt Transparent Header for Ollie

Lets Ollie's sticky header lie transparently over your hero image, then fade to its normal colour as the visitor scrolls.

Description

You have built a site with the Ollie theme and Ollie Pro, you have a hero image at the top of the page, and you want the header to float over it – no bar of colour cutting across the picture – and then turn solid once the visitor scrolls down. This plugin does exactly that, and nothing else.

It is for anyone running Ollie and Ollie Pro who wants that effect without writing the CSS themselves. Install it, tick one box in the Site Editor, and you are done.

Key features

• Transparent over the hero. At the top of the page the header has no background and no shadow. Your hero image starts at the very top of the screen.
• Fades to your own colour. Scroll past 20 pixels and the header fades back to the background colour you chose in the Site Editor. The plugin ships no colours of its own and never overrides your design.
• Solid behind open menus. Open a mega menu or the mobile menu and the header turns solid immediately, so the panel has a backdrop instead of floating over the picture.
• Mega menus arrive with the header. When an Ollie Menu Designer mega menu opens over the transparent header, its panel fades in on the header's own timing and hangs flush against it – no snap ahead of the colour, and no bright seam where the two meet.
• No flash on page load. The header is transparent from the very first frame, not solid-then-corrected.
• Fixes two Ollie Pro bugs along the way (see Why you can't simplify this).
• No settings page. One class in the Site Editor is the whole configuration.
• Updates itself from GitHub, like any plugin from wordpress.org.

The problem

Ollie and Ollie Pro give you a sticky header that hides when you scroll down and comes back when you scroll up. What they have no concept of is a transparent header – the word appears nowhere in either of them. So the header always carries its background colour, and a hero image can never reach the top of the screen; there is always a band of colour above it.

Doing it by hand is harder than it looks. The header has to leave the document flow or it pushes the hero down; the rule that does that has to beat the theme's own rule at identical specificity; the fade has to be added without touching a property Ollie Pro is already animating, or the header stops sliding and starts snapping. Get any of it slightly wrong and it fails silently.

How this plugin helps

It does that work once, correctly, as a mechanism with no design opinions. You keep choosing the colours; the plugin only decides when the header is transparent and when it is not.

Requirements

• WordPress: 6.5 or later
• PHP: 8.3 or later
• Theme: Ollie, or any child theme of it
• Plugin: Ollie Pro

Both requirements are enforced, and neither nags you:

• Ollie Pro is declared in the Requires Plugins header, so WordPress will not let you activate this plugin without it, and deactivates this one if you deactivate Ollie Pro. That header is also what sets the WordPress floor: it landed in 6.5, and on anything older it is ignored, so the plugin would activate with no Ollie Pro present. Nothing else here needs a WordPress newer than that.
• The Ollie theme is checked when the plugin loads. Under any other theme it loads no styles or scripts and touches nothing on your pages, and says nothing about it either.

Installation

1. Download kntnt-transparent-header-ollie.zip.
2. In WordPress, go to Plugins → Add New → Upload Plugin.
3. Choose the file you downloaded and click Install Now.
4. Click Activate.

That is the normal WordPress upload route – nothing special. The plugin is not on wordpress.org, but it updates itself from its GitHub releases: new versions appear under Dashboard → Updates and install with one click, exactly like any other plugin.

Usage

Two steps in the Site Editor. No CSS required.

1. Build the header template part

1. Appearance → Editor → Patterns → Template parts → Add new. Name it Header, area Header.

2. Add a Group block as the outermost block. It must be a Group – Ollie Pro's sticky controls appear on no other block.

3. Select the group → Position → Sticky.

4. Ollie Pro's controls now appear under Position:

   1. Hide in Scroll Down: Check — this one is required. Without it, Ollie Pro writes an inline position: sticky onto the header, which the plugin's stylesheet can't override, so the header stays solid and never goes transparent.

   2. Top Offset: 0

   3. Unstick on Mobile: Has no effect with Hide in Scroll Down on.

   4. Sticky Z-Index: empty

5. Put the logo, navigation and so on inside the group.

6. Give the group a background colour. This is the solid state – what you see once scrolled.

[!NOTE] The plugin puts position: fixed on the header itself, which already lifts it over the hero; Ollie Pro's z-index lands on the group inside that header, where it changes nothing.

[!IMPORTANT]

Don't set a hover colour on the header group.

Ollie Pro writes the transition shorthand for both hoverTextColor and stickyOnScrollUp at equal specificity; the hover rule wins on source order and kills the slide. Put hover colours on the links inside the header instead.

2. Turn on transparent mode

Do this on the templates where you want a transparent header. Those are the only templates that change; all your others keep their normal solid header.

1. Go to Appearance → Editor → Templates and click the template you want – for example Front Page.

2. Click the pencil (Edit) to open it.

3. Click once on the header at the very top of the template. The little toolbar that pops up must say Template Part. If it names another block, you have clicked something inside the header – press Esc until Template Part appears.

4. In the sidebar on the right, scroll down and open Advanced.

5. Click into Additional CSS class(es) and type has-transparent-header. If something is already in the field – Ollie's templates put site-header there – leave it and add yours after a space.

6. Click Save.

Repeat for each template where you want it.

That's the whole configuration. The hero should be the first block in main, with no top margin – the header lays over it.

If your logo or links are hard to read against the hero, that is expected – they keep their normal colour. See Colouring the header's contents below.

[!IMPORTANT] The header must come out as a <header> element.

That is what transparent mode hangs on: every rule implementing it starts with header.has-transparent-header, and Ollie's own sticky rule keys on the tag as well. Land the header in a <div> instead and nothing happens at all – no error, no effect, just a header that stays solid.

Using Ollie's ready-made header? Then it is already taken care of, and there is nothing for you to do. Ollie's templates ship the header part with the tag set explicitly, and the part you built in step 1 carries the Header area, which produces <header> on its own.

[!IMPORTANT] Never put the Template Part inside a Group block.

The Group belongs inside the header part, as in step 1 – never around it. Wrap the part in a Group and the sticky header dies silently: no error, no warning, the header just scrolls away with the page like any ordinary block.

The reason is that Ollie makes the header sticky in pure CSS – body:not(.wp-admin) header:has(>.is-position-sticky) { position: sticky } – so the <header> element itself is the thing that sticks. A sticky element can never leave its parent's box, and a wrapping Group shrinks to exactly the header's height, which leaves it no room at all to travel. Stock Ollie ships no wrapper for precisely this reason.

The usual way people fall into it is adding a Group ‘just to have somewhere to put the class’. Don't. The class goes on the Template Part block itself – Advanced → Additional CSS class(es), as in step 2.

[!WARNING] Ollie's Academy teaches a different structure. Use step 1's instead.

The lesson Sticky headers using sticky positioning wraps the header part in a Group and makes that sticky. It works – but this plugin reads the opposite structure: the sticky Group inside the <header>, as step 1 builds it. With the Group outside, nothing matches and the header stays solid, silently.

No trade-off: Ollie's header pattern already has that Group inside, and the theme ships the CSS to make the header sticky from it – header:has(>.is-position-sticky). Step 1 only switches it on. Same sticky, hide-on-scroll header, plugin or not, and the only one that can go transparent.

Questions, bugs and feature requests

Have a usage question or something to discuss? Please use Discussions.

Found a bug or want to request a feature? Please open an issue. Search the existing issues first to avoid duplicates.

Extending

Everything below is for developers who want to push the effect further. The plugin has no filters and no API – it is two CSS classes and a stylesheet, so you extend it by writing CSS against those classes, in Styles → Additional CSS in the Site Editor or in a child theme's theme.json under styles.css.

The public contract is exactly two classes:

Colouring the header's contents against the hero

Logo and links keep their normal colour, which may be unreadable over a hero image. The transparent state is the absence of is-scrolled, so target that:

header.has-transparent-header > .wp-block-group:not(.is-scrolled) :where(a, svg) {
  color: var(--wp--preset--color--base);
  fill: currentColor;
}

:where() contributes no specificity, so the selector stays low enough to be easy to override but still beats the theme's generated link-colour rule.

Partial opacity

The plugin's default is all-or-nothing: fully transparent at the top, your colour when scrolled. That covers almost every design. If you need something in between, write it yourself – the two states are plain CSS selectors.

20% at the top, 90% when scrolled:

/* Top state. Mirror the plugin's own selector, open-menu condition and all, or
   the header will keep your tint while a mega menu hangs open over the hero.
   `!important` is unavoidable: core emits the block's own preset background as
   `.has-<slug>-background-color { background-color: … !important }`. */
header.has-transparent-header > .wp-block-group:not(.is-scrolled):not(:has([aria-expanded="true"])) {
  background-color: color-mix(in srgb, var(--wp--preset--color--primary) 20%, transparent) !important;
}

/* Scrolled state. */
header.has-transparent-header > .wp-block-group.is-scrolled {
  background-color: color-mix(in srgb, var(--wp--preset--color--primary) 90%, transparent) !important;
}

Both ends interpolate – colour and alpha – over the same 300ms as the slide, because the plugin already transitions background-color.

You can equally use literal colours, including 8-digit hex: #fff20033 at the top, #fff200e6 when scrolled.

Never write the transition shorthand on the header group. Ollie Pro sets transition: transform … on it at specificity (0,2,0). Any shorthand that also lands there resets the transform transition and the header will snap instead of slide. Add properties with transition-property only – the plugin already does this, so normally you need not touch it at all.

Why the transparent state has no class of its own

You may expect an is-transparent class. There isn't one, deliberately.

A class added by JavaScript cannot exist in the first paint. If transparency depended on one, every page load would render the solid header first, then add the class, then animate it away – a visible flash of colour. Measured on a real site: ~90ms of solid background followed by a 300ms fade.

Making the top state the default – the state that needs no class and no script – means it is already correct in the first paint. That is why the selector is :not(.is-scrolled) and not .is-transparent.

The reverse case (loading a page that is already scrolled) renders transparent for a moment and then fades to solid. That is far less jarring, and scroll restoration happens after paint anyway.