Do you want to add a sticky header to your WordPress website? A sticky header stays visible at the top of the page as users scroll, making navigation easier and improving the browsing experience. It’s a great way to keep your menu, logo, or call-to-action buttons always accessible.
With the Nexter Extension Theme Builder, you can easily create a sticky header for your site.
Create a Sticky 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 sticky.
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 sticky 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, select Sticky or Normal + Sticky.
- 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. Once done, click on the Next button.
6. 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.
7. Once done, then click on the Create button.
8. 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.
9. Once done, publish the template.
Now, based on your settings, it will create a sticky header effect.
Create a Sticky Header with Nexter Theme Builder and Nexter Blocks (All Themes)
With the Theme Builder feature from Nexter Extension and Nexter Blocks, you can easily create a sticky header.
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 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.
10. Once done, publish the template.
Now, as per your settings, when you scroll, you’ll see a sticky header.
