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