January 22, 2024

Create a WordPress Sticky Header with Gutenberg (No Extra Plugins)

Play Video

Creating a WordPress sticky header using Gutenberg is an effective way to enhance your website’s navigation. This tutorial will guide you through the process of building a sticky header similar to that of apple.com, using any WordPress block theme, without the need for additional plugins or coding.


Prerequisites

Please make sure you have the following installed and activated:

  • WordPress (Gutenberg)

Examples of Sticky Headers

  • E-commerce Websites
    On sites like Amazon or eBay, sticky headers allow users to easily access search bars, cart, and product categories while browsing through numerous products.
  • Blogs and News Sites
    Websites like The New York Times use sticky headers to keep navigation, search functions, and categories readily accessible, improving user engagement.
  • Portfolio or Business Websites
    For sites showcasing work or services, like a graphic designer’s portfolio or a consultancy firm’s site, sticky headers provide quick access to different sections of the website, enhancing the professional look and user experience.
  • Educational and Tutorial Sites
    On platforms like Khan Academy, sticky headers help users switch between different subjects or access resources without interrupting their learning process.

Instructions for a WordPress Sticky Header with Gutenberg

  1. Customize your header using the site editor.
  2. Group your header by clicking the three dots and selecting ‘Group’.
    Group your header by clicking the three dots and selecting 'Group'


    Tip
    : Rename the group for clarity, e.g., ‘sticky header’.

  3. Deselect ‘Inner blocks use content width’ to avoid narrow headers.
    Deselect 'Inner blocks use content width' to avoid narrow headers
  4. Set the group block’s position to ‘sticky’.
    Set the group block's position to 'sticky'

Make it transparent

  1. Select the group block, go to ‘Background styles’, and adjust the transparency slider.
    Select the group block, go to 'Background styles', and adjust the transparency slider

Create a Top Sales Bar

  1. Add a row block, include a heading and buttons block, and make it sticky.
    Add a row block, include a heading and buttons block, and make it sticky

Official Documentation


WordPress Sticky Header with Gutenberg – Conclusion

This tutorial demonstrates how to create a sticky header in WordPress using the Gutenberg editor. With these simple steps, you can enhance your website’s navigation, making it more user-friendly and visually appealing.

Required Resources

Gutenberg Logo
Free
Credit to Jamie Marsland
Join the WordPress journey with the expert guidance of Jamie Marsland, founder of Pootlepress. With a decade-long legacy of assisting individuals and businesses, Jamie shares practical WordPress knowledge derived from real-world experience. You'll find a wealth of WordPress tutorials, specialized advice for customizing WooCommerce with the Gutenberg Block Editor, and much more.
Visit
Create a WordPress Sticky Header with Gutenberg (No Extra Plugins)
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Menu
Give Feedback
Describe your feedback *
Rate Helwp
Share
Facebook
Twitter
LinkedIn
Reddit
Email
WhatsApp
Telegram
Pocket
Report
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.