How To Create A WordPress Sticky Header: 4 Easy Ways

A sticky header in WordPress is a part of your website that stays at the top of the screen while someone scrolls down the page. It usually includes your logo, menu, or other important links. When someone scrolls, it stays at the top instead of disappearing, so visitors can always see it.

This small feature can make a big difference. It helps people navigate your site more quickly. They don’t need to scroll back up to click on a menu or search for something. It keeps things easy, smooth, and user-friendly, especially on mobile devices.

This tutorial shows you 4 easy ways to add a WordPress sticky header. You’ll learn how to do it with a plugin, with the Full Site Editor if your theme supports it and by writing simple CSS to make your WordPress header sticky, and how to use a theme that already has this option built in.

KEY TAKEAWAYS

• A sticky menu stays at the top of the page while users scroll, helping them navigate your site more easily.
• You can create a WordPress sticky header using plugins, custom CSS, Full Site Editing (FSE), or theme settings.
• Plugins are great for beginners and work with most themes.
• If your theme supports Full Site Editing, you can make the header sticky using a Groupblock and the sticky option.
• Adding custom CSS is a good choice if you use a classic theme and feel comfortable working with code.
• Some themes, such as Astra Pro, offer built-in sticky header features for quick setup without extra tools.
• Always check for overlapping content, missing z-index values, or theme conflicts if the sticky header doesn’t work.
• Adding top padding to your content area stops the header from covering the top of your page.
• Clear your site’s and browser’s cache after making changes to see the updates correctly.

What is a Sticky Header in WordPress?

A sticky header in WordPress is a website header that stays fixed at the top of the screen as you scroll down the page. Unlike a regular header that disappears when scrolling, a sticky header remains visible, ensuring that key elements such as your logo, navigation menu, or important buttons are always accessible. This improves user experience by making navigation smooth, especially on longer pages.

From a technical perspective, this effect is achieved using CSS’s position: fixed (or sometimes position: sticky) property, combined with JavaScript for dynamic behavior.

The header is assigned a high z-index (this is used to define the order of overlapping HTML elements) to ensure it stays above other content. Several WordPress themes or plugins may add smooth transitions, scroll-triggered effects (like shrinking the header), or mobile-responsive adjustments.

WordPress sticky headers are common because they enhance usability without requiring extra clicks. However, they must be implemented carefully to avoid covering content or causing layout shifts, issues that can be fixed with proper padding adjustments or CSS overflow rules. Many themes and page builders offer built-in sticky header options, making setup easy even for non-coders.

How to Create a WordPress Sticky Header

In this section, we show you 4 ways to create a sticky menu in WordPress:

1. Use a Plugin
2. Write Custom CSS
3. Use a WordPress Theme’s Built-in Sticky Headers Feature
4. Use Full Site Editing (FSE) for Block Themes.

Let’s start with the first method.

Use My Sticky Menu Plugin

One of the easiest ways to make your header sticky in WordPress is with a plugin. For this tutorial, we’ll use the My Sticky Menu plugin, which is free, beginner-friendly, and works well with most themes.

Here’s how to set it up:

Go to WordPress Dashboard → Plugins → Add Plugin. In the search bar, type My Sticky Menu. Once it appears, click Install Now.

Then, click Activate to enable the plugin on your website.

Next, go to My Sticky Bar → Sticky Menu Settings.

Turn on the Sticky Menu at the top of the page.

Now, head to Sticky Class and select which menu you want to make sticky on your site. You may also specify the class or ID of your header element. You may get the ID or class by right-clicking on your site’s header and choosing Inspect.

Additionally, if you’re using a paid version of the My Sticky Menu plugin, you may choose the devices to display the WordPress sticky header.

Then, scroll down to the bottom of the page and hit Save.

Now, open your website in a new tab and scroll down the page to check if the header stays at the top. You may notice that the sticky header’s color looks different and doesn’t match the original theme. To fix this, go back to My Sticky Bar → Sticky Menu Setting and change the color for the Sticky Background Color option.

Ensure you save your changes and revisit the website. This is how it looks now based on our settings:

Add WordPress Sticky Header with Custom CSS

If you’re comfortable with some basic code and have a classic WordPress theme, adding a sticky header using custom CSS is a great option. This method gives you full control over the look and feel of your header without needing a plugin.

Here’s how to do it:

First, you need to find the class or ID of your HTML header element. To do this, right-click on the header area of your site and choose Inspect. Look for the line that defines your header, such as:

<header id="masthead" class="site-header">

From here, copy the class or ID (e.g., .site-header or #masthead).

Then, go to the Appearance → Customizer from your WordPress admin dashboard.

Click Additional CSS in the Customizer menu.

In Additional CSS, paste the following code:

.site-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: #fff;
}

In the code snippet above, position: sticky; is used to ensure your header stays visible at the top as you scroll down the page. This setting allows the header to move with the page until it reaches the top, where it sticks in place.

The top: 0; property ensures the header attaches exactly to the top edge of the screen. Without this, the sticky effect may not position the header where you expect it.

Next, z-index: 9999; is used to keep the header above all other content on the page. This is important so the header doesn’t get hidden behind images, sections, or popups.

Lastly, background: #fff; adds a solid white background to the header to help it stand out and prevent it from blending in with the content behind it as you scroll.

When writing custom CSS, ensure the parent containers of your header do not have the overflow: hidden property. This could stop the sticky effect from working. Additionally, z-index should be set high enough (9999) to ensure the header stays above other elements when scrolling.

Once you’ve added the CSS code, click Publish and test your website. Your header should now stay sticky at the top when you scroll down.

Note: You can customize this code or add more CSS properties as required.

Use a WordPress Theme That Supports Sticky Headers

Some themes come with built-in support for WordPress sticky headers. This means you don’t need to install extra plugins or write code. You can turn the feature on from the theme settings. It’s one of the easiest ways to make your header stick to the top while scrolling.

Here are a few popular themes that offer sticky header options:

• Astra: The sticky header is available in the Astra Pro version.
• OceanWP: The premium version includes a sticky header feature.
• Neve: You’ll need the Pro version to use the sticky header.

For this example, we’ll use Blocksy, a free theme with a sticky header feature. However, you must install the Blocksy Companion plugin to enable the WordPress sticky header. Once you have everything ready, go through the following steps:

Navigate to WordPress Dashboard → Appearance → Customize. Click Header.

Switch to the Headers tab, then click Global Header.

Turn on the Sticky Functionality using the toggle button.

You can also choose a sticky header effect and determine whether it stays sticky on all devices or just on desktop.

Additionally, you can also revise the background color. Once done with customizations, click Publish to make your changes live.

Use Full Site Editing (FSE) for Block Themes

If you’re using a block-based WordPress theme that supports Full Site Editing (FSE), like Twenty Twenty-Three, you can make your header sticky without using any plugin or custom code. Here are the steps to make your WordPress header sticky:

From your dashboard, head over to Appearance → Editor. Click Patterns to access WordPress patterns.

Then, click the Header menu and select your required header pattern to open it in the editor.

Once it’s opened, select the WordPress blocks that comprise your header. Then, switch to Block and click Group to wrap them inside a single Group block.

You must apply the sticky position setting to the entire header area at once.

With the Group block selected, scroll down to Position and choose Sticky from the dropdown.

After that, add a background color to your Group block to prevent it from blending into the page when you scroll.

Under Block, scroll down a bit and you’ll find options to set top padding or margin for your content. This helps prevent the sticky header from overlapping or hiding the content beneath it.

Once done, click Save to apply your changes.

Tips: Use a solid background color to resolve transparency or layering issues while scrolling. A white or theme-matching color works best. Always test your website on desktop and mobile. Some devices may show the sticky header differently. If your header looks too tall when sticky, reduce its padding or use smaller elements inside.

Troubleshooting WordPress Sticky Header Issues

Sometimes your sticky header may not work the way you expect. It may not stick, or it could cover part of your content when someone scrolls down. Let’s look at how to fix these common problems.

• Check for Plugin Conflicts: Disable other plugins one at a time to see if any are causing the issue. Look for layout or menu-related plugins that may override header behavior.
• Review Your Custom CSS: Ensure you haven’t added CSS that overrides position: sticky. Avoid using position: relative or overflow: hidden on parent containers.
• Set a Proper z-index Value: Use a high number, such as 9999, to keep your WordPress sticky header on top of other content.
• Confirm Theme Compatibility: Some themes do not support sticky headers by default. So, check your theme documentation or switch to a theme that includes sticky header support.
• Clear Cache: Clear your browser cache and purge any caching plugin used on your WordPress site. This ensures you’re seeing the latest version of your changes.
• Adjust Padding: If the sticky header overlaps page content, add top padding to the page body or first section.

Remember, fixing sticky header problems is usually quick once you check these settings. With the right tweaks, your header will stay visible without covering your content.

FAQS

Other Tutorials of Interest

– How to Create a WordPress Landing Page: A Step-by-Step Guide

– How To Edit Header In WordPress With Site Editor & Customizer

– How to Change Your WordPress Homepage: 3 Methods

– How To Add WordPress Custom Fonts To A Website

– How To Add Expires Headers In WordPress: 2 Easy Methods