How to Make a Sticky Header in WordPress

Creating a sticky navigation menu in WordPress can greatly enhance user experience by ensuring that your menu is always accessible as visitors scroll through your site. Here’s a simple guide on how to achieve this using the WordPress site editor.

1. Access the Site Editor to Edit Site or Header Template

First, log in to your WordPress dashboard. Navigate to Appearance and select Editor (sometimes labeled as “Site Editor” or “Theme Editor” or similar depending on your WordPress version or theme). In the Site Editor, locate and click on the template where your header is located. This might be under Templates or Template Parts depending on your theme. Look for the template labeled Header or something similar.

2. Create a New Group Block

Click the + button to add a new block. Select Group from the block options. This creates a container block that will hold your header and menu.

3. Move the Header into the Group Block

Locate your existing header block in the editor. Drag and drop the header block into the new Group block you just created. This will nest the header within the group. You can use the Document Overview tool to verify.

4. Make the Navigation Wide

Click on the header block to select it. In the block settings on the right-hand side, look for layout options. Set the width of the header or navigation to Wide or Full Width, depending on your design preference.

5. Set the Group Block to Sticky

Select the Group block by clicking on it. In the block settings panel on the right, scroll to the Position section. Choose Sticky from the position options. This will make the entire group (including your header and navigation) stick to the top of the page as users scroll.

Save Your Changes

Once you’ve configured the settings, make sure to Save or Publish your changes then preview your site to ensure the sticky menu behaves as expected.