---
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-08-20
author: "Aditya Sharma"
description: "Do you want your header logo to switch to a different version when the WordPress sticky header shrinks on scroll? A dark logo on a light background at the top..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Change-Logo-in-Sticky-Header-on-Scroll-in-WordPress_-1024x519.jpg
word_count: 575
---

# How to Change Logo in Sticky Header on Scroll in WordPress?

## Key Takeaways

- Nexter Blocks Site Logo block sets a separate sticky logo image for a scroll-triggered header in the WordPress Block editor, without any custom CSS or code.
- Nexter Theme Builder creates a single header template with Normal + Sticky as the header type, so one template renders both the top-of-page header and the shrunken sticky version on scroll.
- Site Logo uses the Sticky Logo toggle to switch from the top-of-page logo to a horizontally trimmed or inverted color logo when the visitor scrolls, which helps on smaller sticky bars and different background colors.

Do you want your header logo to switch to a different version when the WordPress sticky header shrinks on scroll? A dark logo on a light background at the top can flip to a light logo on a dark sticky bar as the visitor scrolls, keeping the brand mark visible against any backdrop.

The Site Logo block in [Nexter Blocks](https://nexterwp.com/nexter-blocks/) lets you set a separate sticky logo image for a scroll-triggered header in the WordPress Block editor, without any custom CSS or code.

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/).

**Best Used For:**

- Brand sites where the sticky header uses a different background color from the top-of-page header, and the standard logo would become unreadable.

- Agency and portfolio sites that want a compact logo mark for the sticky state and the full logotype at the top of the page.

- eCommerce and SaaS sites where the sticky header is smaller and needs a horizontally trimmed logo for better fit.

***Requirement  - This block is a part of the Nexter Blocks. Make sure it is installed and activated to use it.***

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/builder/wordpress-site-logo/)

To do this, first create a sticky header template with Nexter Builder, then add the Site Logo block inside that template.

> *Note: To create the header template, you can use the free *[*Nexter Builder*](https://nexterwp.com/docs/nexter-theme-builder-explained/)* theme builder.*

### Create a Sticky Header

To build the sticky header with Nexter Theme Builder, follow the steps below.

1. Go to **Nexter Settings** > **Theme Builder** and click **Add New Template**. For a full walkthrough on templates, see [How to Create a Header Template in WordPress](https://nexterwp.com/docs/create-header-template-in-wordpress/).

2. In the popup, select **Header** from the **Select Template** dropdown and add a Template Name that describes the header, such as "Sticky Header With Logo Swap".

3. Click the **Additional Settings** button, select **Normal + Sticky** as the header type, and click **Next**. Use this when you want a single template that renders both the top-of-page header and the shrunken sticky version on scroll.

4. In the **Set Display Conditions** section, use the **Include In** setting to choose where the header appears. Keep it set to **Entire Website** for a site-wide sticky header, then click **Create**.

![](https://nexterwp.com/wp-content/uploads/2024/12/site-logo-sticky-header-template-settings.gif)

### Use Site Logo

Add the Site Logo block to the header template and follow the steps below.

1. Select **Normal** from the **Logo Normal/Dual** section. Use this when you want a single logo image at the top of the page and a separate sticky logo image on scroll, rather than a dual-image logo layout.

2. Choose the appropriate image type from the **Logo Type** section, then upload the top-of-page logo from the **Upload Image** section. For SVG logos, pick the SVG option so the logo stays sharp on retina displays.

3. Enable the **Sticky Logo** toggle, and upload the sticky version of the logo from the **Upload Image** section. Use a horizontally trimmed or inverted color logo here, since the sticky bar is shorter and often sits over a different background.

Now when a visitor scrolls the page, the WordPress sticky header stays pinned at the top and the logo switches to the sticky version. To also change the header background color as the visitor scrolls, see [How to Change Background Color on Scroll in WordPress](https://nexterwp.com/docs/how-to-change-background-color-on-scroll-in-wordpress/). If you want the top-of-page header to sit transparently over the hero image before the sticky state takes over, pair it with [How to Add a Transparent Header in WordPress](https://nexterwp.com/docs/add-a-transparent-header-in-wordpress/).