How to manage Transparent Header

Before reading this help file you may want to check this video. It explains theme functionality and may be easier to understand. Watch Video on Youtube

The Transparent Header option makes the website header/menu background transparent, so the content behind it can be visible.

The header is the section that contains the menu, logo, and user login elements.

The Top Bar is the section above the header, where you can add widgets.

Important: The Transparent Header works best when there is a strong visual section behind it, such as a Hero Media image, video, slider, or an Elementor hero section with a background image or color.

Content

When to use Transparent Header
Transparent Header and Hero Media
Transparent Header with an Elementor hero section
Transparent Header with an Elementor / Studio custom header
Set Transparent Header globally
Set Transparent Header for one page
Transparent Header logo
Colors for Transparent Header
Related help articles

When to use Transparent Header

Use the Transparent Header when you want the header/menu to appear over a visual background.

Good examples are:

A Hero Media image
A Hero Media video
A Theme Slider
A Revolution Slider
An Elementor hero section with a background image or color

Note: The map Hero Media usually does not look good with a transparent header because the map has many visual details and the menu can become hard to read.

Transparent Header and Hero Media

The Hero Media is the visual section below the header/menu and above the page content.

When you use the default WPResidence Hero Media options, the transparent header can appear over the Hero Media area.

Hero Media can be set globally from:

Theme Options > Header > Hero Media

Or it can be set individually for a page from the page Appearance Options.

Transparent Header with an Elementor hero section

If you want to create the hero section manually with Elementor, set the page Hero Media option to:

None

Then edit the page with Elementor and create the hero section as the first section of the page content.

In this setup, the transparent header can appear over your Elementor hero section if:

You are using the default WPResidence header and Transparent Header is enabled for that page.
Or you are using a custom Elementor / Studio header and that header template is styled with a transparent background.

Important: Setting Hero Media to None gives Elementor full control over the top hero section. The hero design is then managed from Elementor, not from Theme Options > Header > Hero Media.

Transparent Header with an Elementor / Studio custom header

WPResidence supports custom headers created with WpResidence Studio Templates and Elementor.

A custom Elementor / Studio header replaces the default WPResidence header in the locations where you assign it.

This means:

The default theme transparent header options apply to the default WPResidence header.
If you use a custom Elementor / Studio header, the header design is controlled from that Elementor template.
If you want the custom Elementor header to be transparent, edit the header template and set the background/transparency from Elementor.

Important: If a custom Elementor header has its own background color set in Elementor, that styling can override the transparent look. Edit the custom header template directly to control its background, colors, spacing, and responsive behavior.

Set Transparent Header globally

The global transparent header option applies site-wide, unless a page has its own custom setting.

Go to:

Theme Options > Header > Hero Media Header

From this section, you can manage the default header options

Related help:
Theme Options – Default Header

Set Transparent Header for one page

You can also enable or disable the transparent header for a specific page.

Edit the page from the WordPress admin area.

Scroll down to Appearance Options – Header

From there, set the transparent header option for that page.

This is useful when only some pages need a transparent header, for example the homepage or landing pages.

Transparent Header logo

When using a transparent header, you may need a separate logo version that looks good over the hero image, video, slider, or Elementor background.

Go to:

Theme Options > General > Logos & Favicon

Upload the logo used for the Transparent Header.

Related help:
Logos & Favicon

Colors for Transparent Header

Transparent headers usually need light menu text if the background behind the header is dark.

If the menu text is hard to read, adjust the header colors from:

Theme Options > Design > Header Design & Colors

Tip: Always check the transparent header on desktop and mobile. The logo, menu text, login icon, and submit button must remain visible over the background.

Related help:
Header Design & Colors