--- title: "How to Add a Transparent Header in WordPress with Nexter?" url: https://nexterwp.com/docs/add-a-transparent-header-in-wordpress/ date: 2025-08-19 modified: 2026-05-14 author: "Aditya Sharma" description: "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..." image: https://nexterwp.com/wp-content/uploads/2025/08/How-to-Add-a-Transparent-Header-in-WordPress-with-Nexter-1024x538.jpg word_count: 1048 --- # How to Add a Transparent Header in WordPress with Nexter? ## Key Takeaways - Nexter Extension creates a transparent overlay header through Theme Builder, and the post says Nexter Theme must be installed and activated for this option. - Nexter Blocks and the Container block create a sticky transparent header for all themes, with the Container block activated in Nexter Blocks > Blocks. - Sticky header types include Normal, Sticky, Normal + Sticky, and Only Sticky, each controlling when the header appears and stays fixed while scrolling. - Transparent Header and Overlays place the header above the next section, and the post says adding a background to the header main container prevents a true transparent overlay effect. 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](https://wordpress.org/plugins/the-plus-addons-for-block-editor/). **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](https://wordpress.org/plugins/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](https://nexterwp.com/nexter-blocks/) for the WordPress block editor or [The Plus Addons for Elementor](https://theplusaddons.com) 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](https://wordpress.org/plugins/nexter-extension/) plugin installed and activated. - You need to have the [Nexter Blocks](https://wordpress.org/plugins/the-plus-addons-for-block-editor/) 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](https://nexterwp.com/docs/add-a-container-in-wordpress/) 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.