Skip to content

Transparent (Overlay) Header

The “Transparent Header” (also referred to as “Overlay Header”) in Total allows you to position whatever is at the top of your page under the main header (which will be transparent) so you can create some cool unique layouts. This function can be enabled Globally or on a per-post/page basis.

Example Overlay Header
Note: When you enable the Transparent Header, your header will be placed in an absolute position at the top of the site so any content below it can be seeing behind the header. So you will of course want to setup your site (if enabled Globally) or pages to have something behind the header so that it looks good.

Enable Globally

You can enable the Transparent Header globally via the Customizer under Appearance > Customize > Header > Overlay/Transparent Header.

When you first enable the setting you will notice how everything that was previously below the header will now be under it. So you’ll want to either create a template with some content that you want displayed under the header (maybe a row with a background and some dynamic module inside such as the Page Title module) or you could alter the Page Header title to use a background image style so it looks nice under the header. See the screeshots below for an example:

Enabling the Overlay/Transparent Header Globally
Enabling the Background Image Page Header style is a good way to get a nice look for the Overlay/Transparent Header.

Enable it for Certain Parts of the Site

It’s also possible to enable the Transparent header for only specific parts of your site, for example the Bolt demo uses the Transparent header for the blog posts (example). This can be done by enabling it Globally in the Customizer then using the Conditional Logic field.

Transparent Header Conditional Logic

Enable Individually on a Post or Page

You can use the Theme Settings metabox on any given post or page to enable the Overlay Header on a single page. This would be ideal if you want for example only the homepage to have an overlay header but not other pages. Much like our Modern Agency demo.

Relevant Youtube Videos

Back To Top