Tutorial - Adding a sticky header or banner

[westnz]

Topic Description

Users can now position the Navigation Bar to stick to the top of the screen by nesting the Header inside a Group block and selecting “Sticky” from the Position option.

Related Resources

Links to related content on Learn, HelpHub, DevHub, GitHub Gutenberg Issues, DevNotes, etc.

• [ ]

Guidelines

Review the team guidelines

Tutorial Development Checklist

• Vetted by instructional designers for content idea
• Provide feedback of the idea
• Gather links to Support and Developer Docs
• Review any related material on Learn
• Define several SEO keywords to use in the article and where they should be prominently used
• Description and Objectives finalized
• Tutorial created and announced to the team for Q/A review
• Tutorial reviewed and ready to publish
• Tutorial submitted and published to WPTV
• Tutorial published on WPTV
• Tutorial captioned
• Tutorial created on Learn.WordPress.org
• Tutorial post reviewed for grammar, spelling, etc.
• Tutorial published on Learn.WordPress.org
• Tutorial announced to Marketing Team for promotion

[courtneyr-dev]

Hey @westnz, the weird work around in this release is to add the header template part inside a group from the template page (Home, etc). Once in a group block, it'll be sticky. Less ideal, but should see a fix in 6.3

[westnz]

Yes, that's correct, Courtney. One thing I also noticed is changing the Group block's background colour; otherwise, it is transparent. Thanks!

[westnz]

Sticky.Positioned.Blocks.Tutorial.mp4

[wparasae]

This looks fantastic, Wes! Concise and easy to follow.

Optional addition: The only “gotcha” I’ve had with this feature is that sometimes the group block adds extra padding (Twenty Twenty-Three does this). You might consider mentioning that it may take some adjustments to the group and navigation block to get the desired effect.

[westnz]

Recording: https://learn.wordpress.org/tutorial/adding-a-sticky-header-or-banner/

[courtneyr-dev]

WP 6.4
Patterns: add a sticky header and pagination to make browsing patterns more user friendly (52663).

[courtneyr-dev]

WP 6.4 It is now also available for others patterns
Sticky header bar on Patterns page. Does it need a full revision @westnz ?

[westnz]

Hey @courtneyr-dev
Thanks for flagging this again. I got confused as the link you shared is not about creating sticky headers, but only about the header bar on the Patterns page in the Site Editor being sticky.

I see now that patterns will also be able to become sticky, so a full revision is required. 👍

[westnz]

I will possibly update and reuse as part of the User learning pathway.

[Piyopiyo-Kitsune]

@westnz Do you think we will be reusing this?

[westnz]

Yes, as a standalone lesson but it needs to be updated at some point.