Part 2 of 3 writings.

1. Creating a parallax effect with 3 images in WordPress
2. How to create a sticky transparent navigation bar in WordPress
3. Changing a text’s orientation to vertical

Demo site: https://krai.dwrf.my.id/

GitHub https://github.com/franzaurus/purplish

Another interesting feature which I’d like to recreate in WordPress is its transparent sticky navigation bar.

So, in this project, I will combine a sticky position and a negative margin feature to create a sticky transparent navigation. The sticky position itself has been supported in WordPress 6.2 But the negative margin has just recently been included in WordPress 6.6, although this feature has been supported in Gutenberg 18.3.

Continue on my previous post about a hero section with a parallax effect, I directly added a transparent navigation bar to its hero section. Because this navigation header is homepage-specific, I need to do this on the designated homepage, not the template.

To make the process easier to follow, here are the main steps:

1. Create a template part in the Site Editor that will function as our navigation bar. As this navbar’s background will be transparent with white text on top, temporarily color them for a visual view.
2. Add a site title and navigation block. Let’s name it sticky-header.
3. Shifting to the homepage and create a group directly above the cover block that contains the hero section, and then attach the sticky-header template part there. This will put the sticky-header part immediately under the group.
4. Lastly, set the group’s margin-bottom attribute to a negative value, e.g. -200px, and set the group position to sticky.