Overlay (Transparent) Header

The “Overlay Header” function in Total allows you to locate 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 is something that would be done on a per page or per post basis (there are problems with allowing it globally so it’s not possible to do that). For this reason it’s not technically a “header style” (header styles can be defined globally), however this was noted as “Header Style 4” in one of the demos in the past which may have confused some users.

Creating The Overlay Header

Simply use the Page Settings on any page or post to enable the Overlay Header. This will alter the default design of the navigation menu as well as position the header so it’s fixed and on-top of any content that is on the current page/post.

Tips

• You can use a slider at the top of the page for the header overlay background area
• You can use the page header background (add a header background and disable the title) as the overlay background area
• You can use a row with a background and a min-height as the header overlay background area
• Or…you can come up with your own solution, these are just 3 of the many possibilities

Example

In the following screenshots you can see the result of enabling the Overlay Header with a Slider Revolution added to the top of the page and set to the “Dark” overlay style.

Slider Added To Top Of Page

Overlay With Black Text:

Overlay With White Text: