Greyd.Suite is a WordPress block theme (FSE), so there is no customization for headers and footers nor a header/footer builder as in a classic theme. The header and the footer are block-based templates, and they can be flexibly built from scratch as needed. Some options are available for styling (color, spacing, responsive controls), but some are possible using a small CSS snippet.

The Structure of the page using Transparent Header

A transparent header should start with semantic HTML best practices for a page: <header>, <main>, <footer> and the transparent header should overlap the hero section.

Screenshot of Page structure in FSE

The transparent header should overlap the hero section instead of sitting above as a simple header. As a separate element, the header should be positioned on top of the hero, using absolute positioning. This allows the background image or video of the hero section to extend fully behind the navigation.

Screenshot of a hero section using the transparent header.

Adding CSS for Transparent Header

For the first Group in the Header structure (screenshot below), I added the class: transparent-header, with the following CSS:

.transparent-header {
position: absolute;
left: 0;
right: 0;
z-index: 100;
}

We use absolute positioning so the header doesn’t take up extra space above the hero section, ensuring a seamless overlay effect.

Screenshot of Page Template in Greyd with custom CSS

Where to add a CSS in Greyd.Suite?

For small CSS snippets, Greyd.Suite has a handy place for Additional CSS and it can be found going to: Appearance – Editor – Styles – Additional CSS.

Here is the Demo of this tutorial, following the steps shown in the screenshots above:

Similar Posts