Control sticky and transparent header behavior

Scroll effects should be added after the static desktop header is complete. They change how the navigation behaves over page content and while the visitor scrolls, so contrast and content clearance must be tested together.

Configure the scroll state

Open Settings → POM Theme → Site layout → Header → Header general settings.

1. Enable Sticky header on scroll when navigation should remain available.
2. Enable Auto hide header on scroll when the header should hide as the visitor scrolls down.
3. Choose a Navigation bar transparency mode:
   • Partially transparent
   • Totally transparent
   • Gradient (top to bottom)
   • Opaque
4. Set Header navigation bar alpha when the chosen treatment uses opacity.
5. Save and test on a page long enough to scroll.

Navigation bar transparency can also be overridden for an individual post where that editing screen exposes the corresponding option. Use that exception for a specific hero image or landing page, not to compensate for an unsuitable global default.

Coordinate the first content area

A transparent header visually sits over the content behind it. Review the first visible section, especially when it contains:

• A light or visually busy image
• A title close to the top edge
• A subheader with its own image or overlay
• Breadcrumbs placed immediately after the header

If navigation loses contrast, change the header treatment or the underlying section. Do not rely on hover state to make essential links readable.

Test every transition

Use a desktop page and verify:

1. The initial state at the top of the page.
2. The state after a short downward scroll.
3. Continued downward scrolling when auto-hide is enabled.
4. Upward scrolling and the header’s return.
5. The boundary between header, subheader, and breadcrumbs.
6. Keyboard focus while the page is scrolled.
7. Sticky sidebars, rows, and tab navigation remain below the visible header and follow its movement continuously, without jumping, as it hides and returns.

Repeat the test for a signed-in visitor if login controls or a logged-in menu are present.

Common corrections

• Content begins beneath an opaque header: review the selected structure and the first section’s spacing.
• Transparent navigation is unreadable: use a stronger alpha, gradient, opaque mode, or a more suitable background.
• The header occupies too much vertical space: reduce Header navigation bar padding before shrinking interactive targets.
• A single post needs different treatment: use the available post override and keep the global setting appropriate for the rest of the site.

For the non-scrolling setup, return to Configure the desktop header.