--- title: "How to Create a Sticky Header in WordPress with Nexter?" url: https://nexterwp.com/docs/create-a-sticky-header-in-wordpress/ date: 2025-11-13 modified: 2026-04-14 author: "Aditya Sharma" description: "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..." image: https://nexterwp.com/wp-content/uploads/2025/11/Create-a-Sticky-Header-in-WordPress-1024x538.jpg word_count: 810 --- # How to Create a Sticky Header in WordPress with Nexter? ## Key Takeaways - Nexter Extension Theme Builder allows users to create a sticky header for their site. - Nexter Theme requires installation and activation to create a sticky header using Nexter Theme Builder. - Nexter Blocks provides the Container block, which is necessary for creating a sticky header template. - Users can select between 'Normal + Sticky' and 'Only Sticky' options for header visibility when using Nexter Blocks. 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](https://wordpress.org/plugins/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](https://nexterwp.com/nexter-blocks/) for the WordPress block editor or[ The Plus Addons for Elementor](https://theplusaddons.com) 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](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 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. ## Frequently Asked Questions **Q: What should I do if my sticky header is not appearing after following the setup steps?** A: If your sticky header isn't showing, first ensure that both the Nexter Theme and Nexter Extension are installed and activated. Also, check that you've selected the correct header type in the Additional Settings. If you're using Nexter Blocks, confirm that the Container block is activated, as it's essential for creating the sticky effect. **Q: What is the difference between the 'Normal + Sticky' and 'Only Sticky' header types?** A: 'Normal + Sticky' makes the header visible from the start and sticks to the top when scrolling down. In contrast, 'Only Sticky' hides the header initially and only makes it visible when it reaches the top during scrolling. Choosing the right type depends on how you want your navigation to behave during user interaction. **Q: What happens if I forget to set the display conditions for my sticky header template?** A: If you don't set the display conditions for your sticky header template, it won't appear on your site. Properly configuring the display conditions ensures that the header shows up where you want it, such as on the entire website or specific pages. **Q: Are there any performance considerations when using sticky headers?** A: Sticky headers can impact page performance, especially if they include heavy elements or animations. To optimize performance, keep the header design simple and limit the use of complex animations. This ensures that the sticky header remains responsive and does not slow down the user experience. **Q: What common mistakes do users make when setting up a sticky header?** A: A common mistake is neglecting to activate the Container block when using Nexter Blocks. This block is crucial for enabling the sticky functionality. Additionally, users often forget to check their display conditions, which can lead to the header not appearing as intended.