Browse

Overlay (Transparent) Header

  • Article last updated on December 10, 2020
  • Posted under:

The “Overlay Header” (also referred to as “Transparent 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

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 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.

Note: When you enable this function on a singular page it will make your header go on top of your site content so you’ll want to add something nice to the top of your site such as a slider or row with a background that will display behind the header.