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 the Nexter Extension Theme Builder, you can create a transparent overlay header. To create a sticky transparent header, you can use the Theme Builder together with Nexter Blocks.
Create a Transparent Overlay Header with Nexter Theme Builder (Nexter Theme Only)
With the Theme Builder feature from Nexter Extension, you can easily 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, you can click on the Additional Settings link. From the Type dropdown, you can select the appropriate header type.
- Normal – This is to create a normal header.
- Sticky – This will make the header sticky at the top. It will appear only when users start scrolling down and remain fixed at the top.
- Normal + Sticky – If you want the sticky header to be visible from the start, then select this option. This will make the header stick at the top from the beginning.
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, now you have to create the header template 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, you have to select the sticky type. Here you’ll find two options –
- Normal + Sticky – With this option, you can create a sticky header. Where it will be visible initially, when the container reaches the top it will stick and when you scroll up it will scroll down.
- Only Sticky – With this option, you can create a reverse sticky header, where it will not be visible initially but once it reaches the top it will be visible and stick at the top. Once you scroll up it will hide again.
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, i.e. it will not stick to the top while scrolling down it will only stick 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’ll see a transparent sticky header.
