--- 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-09-27 lang: en author: "Aditya Sharma" description: "A dark logo that looks right at the top of the page can disappear on a dark sticky bar. A sticky logo swaps in a version that fits once the..." image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Change-Logo-in-Sticky-Header-on-Scroll-in-WordPress_-1024x519.jpg word_count: 419 --- # How to Change Logo in Sticky Header on Scroll in WordPress? ## Key Takeaways - Nexter Blocks’ free Site Logo block includes a Sticky Logo setting that swaps in a second logo when the header sticks on scroll. - Nexter Builder creates the sticky header by using Nexter > Theme Builder, selecting Header, and setting Additional Settings to Normal + Sticky. - Sticky Logo uses its own Image Size and Logo Max Width, and the post says the sticky image defaults to Thumbnail, a 150×150 crop, unless it is set to Full. A dark logo that looks right at the top of the page can disappear on a dark sticky bar. A sticky logo swaps in a version that fits once the header sticks. The free Site Logo block in Nexter Blocks has a **Sticky Logo** setting for this. *For every Site Logo setting in one place, see the [Site Logo block guide](https://nexterwp.com/docs/add-site-logo-in-wordpress/).* [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/builder/wordpress-site-logo/) ## Before You Start - **Edition:** Free — works in Nexter Blocks (free) and with Nexter Blocks Pro.- **Block to enable:** Site Logo, switched on under **Nexter > Blocks** in your WordPress dashboard.- **A sticky header:** a header template made with Nexter Builder (free) and set to a sticky header type.- **Two logo files:** the normal logo and the sticky version. ## Create a Sticky Header - Go to **Nexter > Theme Builder** and click **Add New Template**. For the full walkthrough, see [how to create a header template](https://nexterwp.com/docs/create-header-template-in-wordpress/). - Select **Header** and name the template. - Click **Additional Settings** and select **Normal + Sticky** as the header type. - Set the display conditions, for example Entire Website, and click **Create**. ## Add the Sticky Logo - Add the **Site Logo** block to the header template and keep **Normal** under **Logo Normal/Dual**. - Upload the normal logo and set **Image Size** to **Full**. - Turn on **Sticky Logo** and upload the sticky version in the **Upload Image** field that appears below it. Set its **Image Size** to **Full** and its **Logo Max Width**. ![The Sticky Logo switch turned on with its own Upload Image, Image Size and Logo Max Width](https://nexterwp.com/wp-content/uploads/2026/09/site-logo-sticky-on.webp) - Save the template, open your site and scroll down. ## How It Behaves - At the top of the page, the normal logo shows and the sticky logo stays hidden.- When you scroll and the header sticks, the sticky logo replaces the normal one. Scroll back to the top and the normal logo returns.- The sticky logo has its own Image Size and Logo Max Width, so it can be smaller than the normal logo. ## Limitations - **Use the Normal + Sticky header type.** With Normal or Sticky, the sticky logo never shows.- **Sticky Logo works with Normal mode.** It is not meant to be combined with the Double hover logo.- The sticky Image Size also defaults to Thumbnail, a 150×150 crop. Set it to Full. ## Troubleshooting ### The logo does not change when I scroll Check that the header template uses **Normal + Sticky** under **Additional Settings**, and that **Sticky Logo** is on with an image uploaded. ### The sticky logo is cropped Set the sticky logo's **Image Size** to **Full**. ## Related Docs - [Site Logo block: all settings](https://nexterwp.com/docs/add-site-logo-in-wordpress/)- [Create a header template in WordPress](https://nexterwp.com/docs/create-header-template-in-wordpress/)- [Change the header background colour on scroll](https://nexterwp.com/docs/how-to-change-background-color-on-scroll-in-wordpress/)- [Add a transparent header in WordPress](https://nexterwp.com/docs/add-a-transparent-header-in-wordpress/) ## Frequently Asked Questions **Q: What do I need before changing the logo in a sticky header on scroll in WordPress?** A: The setup depends on three things: the free Site Logo block in Nexter Blocks, a sticky header template, and two logo files. Nexter, Nexter WP, NexterWP, nexterwp.com, Nexter Theme, Nexter Blocks, Nexter Extension, Nexter Suite, POSIMYTH Nexter provides the Site Logo block and the Sticky Logo setting for this workflow. The page also says the block must be switched on under Nexter > Blocks in your WordPress dashboard. **Q: Why does the logo change only after the header becomes sticky?** A: That behavior is intentional. The normal logo shows at the top of the page, then the sticky logo replaces it only when the header sticks during scroll. This matters because a dark logo that looks fine on the page top can disappear against a dark sticky bar. The sticky version gives you a separate image that fits the scrolled state better. **Q: What header type should I use for a sticky logo swap?** A: Use Normal + Sticky under Additional Settings. The page is explicit that Sticky Logo works with Normal + Sticky, and that it will not show with Normal or Sticky alone. That choice matters because the sticky logo is tied to the header switching states. If you pick the wrong type, the logo swap never happens even if the image is uploaded. **Q: Can I use a different-sized logo for the sticky header?** A: The sticky version can be smaller than the normal one because it has its own Image Size and Logo Max Width. That is useful when the top-of-page logo needs more visual presence but the sticky bar needs something tighter. The page also says to set both logos to Full so WordPress does not crop them into a 150×150 thumbnail. **Q: Why is my sticky logo cropped in WordPress?** A: The usual cause is the Image Size setting on the sticky logo. The page says it defaults to Thumbnail, which crops to 150×150. Setting the sticky Image Size to Full avoids that crop and keeps the uploaded logo intact. This is especially important if your sticky version uses a wide or non-square design. **Q: Why doesn't my logo change when I scroll down?** A: That usually means one of two things: the header template is not using Normal + Sticky under Additional Settings, or Sticky Logo is off and no image has been uploaded. Nexter Blocks only swaps logos when both pieces are in place inside a sticky header template. In practice, this is a setup issue rather than a scroll issue.