Transparent Header (Pro)

The Transparent Header module enables a transparent Site Header header for your site. This works well with the Hero Section module enabled or with a page builder plugin. A transparent header usually overlays the page header or hero section area. Below is an example of a page with a transparent header:

To enable a transparent header on your site, navigate to Appearance > Customize > Genesis Customizer > Header > Transparent Header and select the screen sizes which should show the transparent header from the Enable On setting:


By default, the transparent header will have a fully transparent background and white links. These defaults can be changed from the Colors settings provided in the Transparent Header section in the Customizer. These colors are only applied to pages with a transparent header enabled and will not affect the default header colors. Below is an example of working with the color settings:

Different Logo

You may want to use a different logo for pages using the transparent header only. To do this, navigate to Header > Transparent Header in the Customizer and check the "Use different logo for transparent header" option. Checking this option will open up some more options for customizing the transparent header logo. These settings apply to the Transparent Header logo only and do not affect the default logo.

If a different logo is set, the logo will be different for pages using a transparent header. See screen recording below as an example of how it works.

First, set a default logo from the Site Identity section in the Customizer. Refer to the How to upload a custom logo article for further instructions. Once you have set the default logo, navigate back to Header > Transparent Header and upload a different logo for the transparent header. The transparent logo size and spacing can be adjusted from the logo settings below the logo upload setting.

Individual Pages

The transparent header can be disabled on a per-page basis. To disable the transparent header on a specific page, navigate to the Edit Page screen for the page you wish to edit. There will be a Genesis Customizer settings in the bottom right of the screen. Check the "Disable transparent header" option and then click Publish: