Homepage Editing - Set Header Menu Transparency

This guide will cover how to enable and edit the header menu transparency on your website.

How to Enable Header Transparency

1. Open the WordPress Editor for the page or template you want to edit.

2. From the List View on the left panel, select the Group block located inside the Header section.
 

3. On the right side panel, click on the '+' sign next to Position.  
 

4. From the position drop down, update to Sticky.
 

5. Once Sticky has been selected, toggle on Enable color transition on scroll.
 

6. Proceed to the Styles tab. You will have 4 color settings that you can configure:

• Text
• Background
• Background (Before Scroll)
• Text (Before Scroll)

You can adjust these values to suit your design preferences.

Note: If you do not select a color for the ‘Background (Before Scroll)’ color setting, you will see a transparent background for the header. This is applicable for any other color setting. You can control the opacity via the settings as well.

7. Click Save to apply your changes.

Show Hero Content Behind Transparent Header

1. While in the editor, locate and select the Hero block from the left panel.
 

2. From the right side panel, navigate to the Styles tab and proceed to Margin.

3. Click the Anchor Link icon to the right of Margins to Unlink. Click on the custom size icon and set the top margin only to a negative value. 

Note: The recommended negative value is -120. You can fine tune this value based on your design. 

Do not change the bottom margin value. 

4. Click Save to update the layout value. 

Set Separate Header Colors for Internal Pages in Guterberg

If you would like your homepage header to look different from the rest of the site—like using unique colors or transparency— proceed with the steps below.

Prerequisites: 

• You must ensure the homepage header colours and transparency are already configured.
• You must be using the Gutenberg block-based site editor (AP+ platform or similar setup).

1. While in the editor, navigate and click on the logo / navigation icon at the top left of the screen. 

This will open the Template Editor view where you can see all available templates.

2. Navigate and click on the Pages template.

Note: Do not edit any other templates (e.g., Homepage, Archive, Single Post), even though they are visible and editable.

3. Once you have opened the Page layout, navigate and click on the Document Overview button. 

4. Click on the header drop down and select the block labeled Group. 

Note: The block labeled Group may appear elsewhere on this page. Please ensure you only select the one under the Header drop down.

5. With Group selected, from the right block panel, click on Settings. Click the '+' next to Position.

6. Update the Position type from Default to Sticky. This will ensure the header behaves consistently across scrolling on the internal pages.

6. With Header > Group still selected, go to the Styles tab and adjust the following to your desired look:

• Text
• Background
• Link
• Background (Before Scroll)
• Text Color (before Scroll)
• Opacity 

7. Click Save to apply changes.