Adding a sticky header or banner


A new sticky option is available when wrapping a header or banner in a Group block. The sticky feature will ensure the block remains within the viewport and is stuck to the top of the page when the content is scrolled.

Learning outcomes

  1. Wrapping your header in a Group block.
  2. Allocating and selecting the sticky option.
  3. Changing the background of the Group block to ensure the header is not transparent.
  4. Previewing the sticky header or banner in the Block Editor.

Comprehension questions

  1. What is the advantage of using a sticky header?
  2. How can you change the padding of your sticky header or banner?

Transcript

Hi, and welcome to Learn WordPress. Do you want to add a sticky header or banner at the top of your site? Well, now you can do that without knowing any code. A new sticky option is available when using the Group block so that the block remains within the viewport and is stuck to the top of the page when the content is scrolled.

This is useful if you want a header or promotion banner to remain on screen regardless of the page’s scroll position. Let’s look at two examples. The first one is from House of travel and the second example is from the Gladwrap website.

To create a sticky header, make your way to Appearance and click on Editor. Open the relevant template. In this case, my Page template. Open the List View, select your header, click on the three vertical dots and then wrap your header in a Group block. Once you have done that, open up your Settings and scroll down to Position. Open up the drop-down and then select sticky.

You will notice it says the Block will stick to the top of the window instead of scrolling. So once you’ve selected sticky, open styles and then change the background colour of the Group block; otherwise, the Group block will be transparent, and the content on your site will be visible when scrolling.

The wonderful thing is we can preview the sticky feature within the Block Editor as well as in the front end. Please note, sometimes the Group block adds extra padding; you may need to adjust the Group or Navigation block to get the desired effect. So once we click Save, we can make our way to the front end of the website, and here we can see our new sticky header in action.

Enjoy exploring this new feature and visit Learn WordPress for more tutorials and training material.

Workshop Details


Presenters

Wes Theron
@west7

I am an Instructional Designer for the WordPress open-source project sponsored by Automattic. I am a strong supporter of the open-source movement. I have a background in education and content development. I am a husband, father, dreamer and lifelong learner.