After learning how to build a sticky header and a transparent header in a WordPress Block Theme, this tutorial shows how to combine both using Greyd.Suite. The video below shows this behaviour – changing the logo and colours on a transparent + sticky header – for desktop and mobile:

The Structure for a Transparent + Sticky Header

I used the same structure as for building the Sticky Header – the difference is adding a parent group to the Transparent Header and keeping the class transparent-header to it.

Screenshot of Transparent + Sticky Header Structure

For more details about Sticky header, check this tutorial: DailyGreyd1: How to build a Sticky Header and Change the Logo.

For more details about Transparent header, check this tutorial: DailyGreyd3: Transparent Header in Greyd.Suite.

Similar Posts