Do you want to add a transparent header to your WordPress site? A transparent header sits on top of your page content, usually over a hero image or banner, allowing the background to show through. This design style gives your site a modern, sleek look and is especially popular for homepages and landing pages.
With Nexter Extension, you can create a transparent overlay header using the Theme Builder. To add a sticky transparent header, use the Theme Builder together with Nexter Blocks.
Best Used For:
- Business and portfolio homepages with a full-width hero image where a floating header improves visual impact
- Landing pages where a transparent header keeps the design clean and distraction-free
- Sites that need a sticky header that becomes visible with a background color only when the user scrolls
Create a Transparent Overlay Header with Nexter Theme Builder (Nexter Theme Only)
With the Theme Builder feature from Nexter Extension, you can create a header template and make it transparent with an overlay.
Required Setup
- Make sure to have the Nexter Theme installed and activated.
- You need to have the Nexter Extension plugin installed and activated.
To create a transparent overlay header with Nexter Theme Builder, follow the steps –
1. From the Dashboard, go to Nexter Extension > Theme Builder > Add New Template.
2. In the pop-up, select Header from the Select Template dropdown.
3. Then, in the Name of Template field, add the template name.
4. After that, click the Additional Settings link and select the header type from the Type dropdown.
- Normal – Creates a standard header with no sticky behavior.
- Sticky – Makes the header sticky at the top. It appears only when users start scrolling down and remains fixed at the top. Use this when you want a header that is hidden on page load and reveals itself as the user scrolls.
- Normal + Sticky – Makes the header visible from the start and keeps it fixed at the top as the user scrolls. Use this when you want the header visible at all times.
Note: The Additional Settings option is only available if you are using the Nexter theme.
5. Then turn on the Transparent Header toggle, it will make the header overlap the first section of the page.
Note: If you add a background to the main container of the header, that will not become transparent with this option; it will simply overlap the next section of the page. To create a transparent overlay effect, make sure not to add any background to the header.
6. Once done, click on the Next button.
7. On the next screen, you have to set the appropriate display conditions.
You can set the template location as per your requirements, let’s select Entire Website here.
8. Once done, then click on the Create button.
9. Then it will open the WordPress editor, where you can use the WordPress blocks or Elementor to create the actual layout and content of the template.
To enhance your design process, you can use Nexter Blocks for the WordPress block editor or The Plus Addons for Elementor widgets for Elementor.
10. Once done, publish the template.
Now, based on your settings, it will create an overlay header effect.
Create a Sticky Transparent Header with Nexter Theme Builder and Nexter Blocks (All Themes)
With the Theme Builder feature from Nexter Extension and Nexter Blocks, you can create a sticky header with an overlay and transparent background.
Required Setup
- You need to have the Nexter Extension plugin installed and activated.
- You need to have the Nexter Blocks plugin installed and activated.
- Make sure the Container block is activated, to verify this visit Nexter Blocks → Blocks → and Search for Container and activate.
To create a sticky transparent header with Nexter Theme Builder and Nexter Blocks, follow the steps –
1. From the Dashboard, go to Nexter Extension > Theme Builder > Add New Template.
2. In the pop-up, select Header from the Select Template dropdown.
3. Then, in the Name of Template field, add the template name.
4. Once done, click on the Next button.
5. On the next screen, you have to set the appropriate display conditions.
You can set the template location as per your requirements, let’s select Entire Website here.
6. Once done, then click on the Create button.
7. Then it will open the WordPress editor. Create the header template’s main container using the Container block from Nexter Blocks.
For the rest of the elements in the template, you can use blocks from Nexter Blocks, WordPress blocks or any other block.
8. After you’ve created your template, select the Container block and go to the Extra Options tab and enable the Sticky toggle. This will make your header sticky.
9. Then, from the Header Type section, select the sticky type. You will find two options:
- Normal + Sticky – Creates a sticky header that is visible on page load. When the container reaches the top, it sticks and remains fixed. When you scroll back up, it scrolls down with the page.
- Only Sticky – Creates a reverse sticky header that is not visible on page load. Once the header reaches the top, it becomes visible and sticks. When you scroll back up, it hides again. Use this when you want a header that only appears after the user has scrolled past the page top.
Select the option as per your requirements.
From the Animation section, you can select the animation effect for how the sticky header will show.
By enabling the On Mouse Scroll Up Sticky toggle, you can show the sticky header on the mouse scroll up only, meaning it will not stick while scrolling down, only when you scroll up.
Note: You can also enable the Overlays toggle, to overlay the header above the next section. It will create a similar header overlay effect to the Nexter Theme Builder option. You can enable both Overlays and Sticky to create a sticky header with an overlay effect.
10. Then go to the Style > Background and go to the Sticky tab.
11. After that, add background color or background gradient color with opacity.
12. Once done, publish the template.
Now, as per your settings, when you scroll, you will see a transparent sticky header.
