Transparent header

The transparent header is set per page, not globally. You turn it on from the Elementor page editor.

How it works

A transparent header has no background color, so page content (like a hero image or full-width banner) shows through behind the header text and logo. This creates a clean look for landing pages.

Turn on transparent header

1. Open the page in Elementor.
2. Then open Page Settings panel.
3. Go to the Header section.
4. Turn on Enable transparent header.

You can also enable Use Alternative Logo to optionally set a different logo for the transparent state (e.g. a white version).

Colors for transparent state

When transparency is on, the text and link colors switch to a separate set so they stay readable against the page background. These are set in the same Page Settings → Style -> Header section.

Setting	Description
Text color	Color for header text and links when transparent.
Background color	Color for hover states and interactive elements.

Tip

The transparent header works best on pages with a hero image or video at the top. On pages without one, you may want to disable transparency and use the standard header colors.