Call Us: 888-867-5309

How to Implement a Transparent Header

As you can see on the home page of the Apex theme demo site, the header has a transparent background. This can easily be implemented on any selected page within your website. To do so, use the Header Options module.

First, go to edit the page that you want to have a transparent header. On the left side panel, click on the "Add" tab to add a new module to the page Select the "Header Options" module and drag it onto the page.

NOTE: It does not really matter where you place the module as it does not actually display anything on the page. You could drop it in the hero section, as opposed to in its own section, and then you won't see the empty section in the editor view.

Module Settings

blog-header-options-settings

Once you have the module on the page, click on it. You may need to click the "Contents" tab, find the module in the list of active modules, and click on it there to edit.

When you go to edit this module, you will get the global content alert from HubSpot... as this is a global module.

The settings for this module are simple... as in there is only one!

  • Pages with Transparent Header. This is a page selection field repeater. Click "Add" to get a page selection. Search and locate your desired page for existing pages that you have created. After selecting the page, click "Apply Changes".

Click the "Header Options" breadcrumb link on the left panel above the module settings. This will return you to the main view of this module. You should see your selected page in the list now.

To apply the changes, click the orange "Publish" button in the top right corner. As this is a global module, you will be alerted that your changes will apply to multiple assets.

Now, you're all set with a transparent header on your selected page(s)!

About the author

Nathan Gifford

Nathan is the Director of Website Services at Growth and has been in web development for nearly 20 years... spending much of that in PHP open source CMS worlds and eventually landing in the HubSpot CMS realm. He is the lead developer of our Redwood themes and Marketplace efforts.