Tutorial: Overlay Header Effect for Specific Pages

In this tutorial, you’ll learn how to create an overlay header effect for specific pages using Oxygen’s Header Builder element.

The Header Builder element allows you to create as many Header Rows as you’d like, and then display them conditionally depending on the state of the Header itself. This means we can choose which Header Rows should be shown depending on whether the Header is in an overlay state, sticky state, or a normal state. In this video, we use this feature to create an overlay Header for only our home page, while having a completely different Header displayed for other pages.

You can determine the overlay state of the Header Builder on a per-page basis at Manage > Settings > Page Settings in the Oxygen builder.