--- title: "How to Change Logo in Sticky Header on Scroll in WordPress?" url: https://nexterwp.com/docs/change-logo-in-sticky-header-on-scroll-in-wordpress/ date: 2024-12-24 modified: 2026-04-14 author: "Aditya Sharma" description: "Do you want to change the logo in the sticky header when scrolling on your WordPress website? While scrolling, changing the logo in the sticky header can enhance your website's..." image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Change-Logo-in-Sticky-Header-on-Scroll-in-WordPress_-1024x519.jpg word_count: 326 --- # How to Change Logo in Sticky Header on Scroll in WordPress? ## Key Takeaways - Nexter Blocks includes a Site Logo block that allows users to change the logo in the sticky header on scroll. - Nexter Theme Builder enables the creation of a sticky header template by selecting Normal + Sticky as the header type. - Users can enable the Sticky Logo toggle in the Site Logo block to display a different logo when scrolling. Do you want to change the logo in the sticky header when scrolling on your WordPress website? While scrolling, changing the logo in the sticky header can enhance your website's user experience. With the Site Logo block from Nexter Blocks, you can easily change the site logo in the sticky header on scroll in WordPress. *To check the complete feature overview documentation of the Nexter Blocks Site Logo block,* *[click here](https://nexterwp.com/docs/add-site-logo-in-wordpress/)* ***Requirement  - This block is a part of the Nexter Blocks, make sure it's installed & activated to enjoy all its powers.*** [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/builder/wordpress-site-logo/) To do this, you have to create a sticky header template and then use the Site Logo block in the template. > *Note: To create the template, you can use the free *[*Nexter Builder*](https://nexterwp.com/docs/nexter-theme-builder-explained/)*.* ### Create a Sticky Header To create the sticky header with Nexter Theme Builder follow the steps -  1.** **Go to** Nexter Settings **>** Theme Builder **and click on the **Add New Template**. 2. Then,** **in the popup select the** Header **type from** **the** Select Template **dropdown and add the appropriate** **Template Name. 3. After that, click on the **Additional Settings** button, select **Normal + Sticky** as the header type, and click on the **Next** button. 4. Then, you’ll see the **Set Display Conditions** section. From the **Include In** section, you can set where you want to show the header, let’s keep it to the **Entire Website** here and then click the **Create **button. ![](https://nexterwp.com/wp-content/uploads/2024/12/site-logo-sticky-header-template-settings.gif) ### Use Site Logo Now, add the Site Logo block to the header template and follow the steps -  1. Select **Normal **from the **Logo Normal/Dual** section. 2. After selecting the appropriate image type from the** Logo Type** section, add the normal logo image from the **Upload Image **section. 3. Then, enable the **Sticky Logo** toggle, and add the sticky logo version from the **Upload Image** section. Now when you scroll the page, the header will stick at the top and the logo will change. ## Frequently Asked Questions **Q: What should I do if my sticky header logo doesn't change on scroll?** A: If your sticky header logo isn't changing on scroll, ensure that you have enabled the Sticky Logo toggle in the Site Logo block settings. This toggle is essential for the logo to switch as the header becomes sticky. Additionally, verify that both the normal and sticky logo images are correctly uploaded in the respective sections. **Q: Can I use the Site Logo block from Nexter Blocks for other themes?** A: The Site Logo block from Nexter Blocks is designed specifically for use with the Nexter Theme and requires Gutenberg as the primary builder. If you're using another theme, the functionality may not be supported. It's best to check compatibility with your current theme before proceeding. **Q: What are the best practices for creating a sticky header in WordPress?** A: When creating a sticky header, ensure that you set the header type to Normal + Sticky in the Nexter Theme Builder settings. This configuration allows for a smooth transition as users scroll. Additionally, consider using a contrasting sticky logo to maintain visibility against the header background. **Q: How do I create a sticky header template using Nexter Theme Builder?** A: To create a sticky header template, navigate to Nexter Settings > Theme Builder, click 'Add New Template', and select 'Header' from the dropdown. After naming your template, choose Normal + Sticky as the header type. Set the display conditions to include the entire website for consistent application. **Q: Does the sticky header affect page loading speed?** A: Using a sticky header can impact page loading speed, especially if the header contains large images or multiple elements. However, NexterWP products are optimized to load only 1 CSS and 1 JS file per page, minimizing performance issues. Always test your site after implementing changes to ensure optimal loading times.