Do you need to change the logo for a sticky header?
Here is a simple way to achieve this behaviour using Greyd.Suite‘s Animation.
What is Greyd.Suite?
Greyd.Suite is a block-based WordPress theme (Full Site Editing) that allows full customization of the Header as a Template Part, offering greater flexibility than classic themes.
Building the Sticky Header as a Template Part
In a classic theme (like KadenceWP), enabling a sticky header is a simple click in Customizer—without thinking much about the underlying code. However, working with Full Site Editing (FSE), you gain more flexibility: the header is block-based, meaning you can add any element as needed.
I learned how to build a sticky header from this official tutorial created by Thomas, using the powerful feature of Greyd.Suite – the Animation.
How Sticky Header is Built – the Structure
1. In the Header (Template Part), we use a Sticky Box element inside a Group. A sticky element requires a parent for proper behaviour, as shown in the screenshot below.
2. On the Sticky Box Element, I added an animation (Change color) that allows me to change the colour using the trigger On Scroll.
Changing the Logo for the Sticky Header
To change the logo for the sticky version, we need 2 different elements to be activated as a logo for each state – one for each state: the site logo and an image.
For the Site logo element, I added a custom animation, in which the initial state is display: block; and the final state is display: none;
For the Sticky Image element (logo used for sticky state), I added another Custom animation, using the opposite initial / final state:
Here is the Demo of this tutorial, following the steps shown in the screenshots above:
This simple animation trick helped me to understand how powerful Greyd.Suite really is and that’s why I decided to start the #DailyGreyd series of mini-tutorials.
