How to Create a WordPress Sticky Header (Updated Guide)

Want to add a sticky header to your website?

By the end of this guide, you will know how to implement a sticky header on your WordPress site using any of the 3 methods below.

Here’s what we will explore:

• What a sticky header is
• Use Elementor to create a sticky header
• A plugin and themes that can help

Ready? Let’s begin!

What is a sticky header?

A sticky header, also known as a persistent header, is a common web design element that stays fixed at the top of the webpage as the user scrolls down.

It provides constant access to the website’s navigation, search, and other key features, and is particularly useful on websites with long content.

Their ability to improve the ease of use, coupled with their aesthetic appeal, makes them a popular choice among modern web developers and designers.

How to Create a Sticky Header

There are three simple ways to create a sticky header in WordPress:

1. Through Elementor
2. Through the ‘My Sticky Bar’ plugin
3. Through a WordPress theme with this feature

Method 1: Use Elementor

To create a sticky header using Elementor, follow these simple steps:

Step 1: Edit the container

If you’re here looking, I assume that you’re already familiar with Elementor and how to use it, and its theme builder feature.

But anyway:

• Open the header template
• Hover over the container
• Click the edit container button

It should look something like this now:

After you click the button, the panel on the left side should change to that container’s layout (or style) settings.

Step 2: Enable the sticky option

From there, go to the advanced tab and do the following:

• Open motion effects
• Click the sticky dropdown
• Select the top option

You can also choose the devices you want your sticky header to appear on.

From there, don’t forget to click the update button.

⚠️ Note: You will need Elementor Pro to access the theme builder and sticky header functionality, as these features are not available in the free version.

Method 2: My Sticky Bar

Another way to create a sticky header is through the My Sticky Bar plugin in WordPress.

Step 1: Install and activate the My Sticky Bar plugin

My Sticky Bar is available in the WordPress plugin repository, so all you have to do is install and activate it from there.

From the WordPress dashboard:

• Go to plugins > add new plugin
• Search for the My Sticky Bar plugin
• Install and activate the plugin

Once installed, you will be redirected to the plugin dashboard.

Step 2: Go to the sticky menu settings

From there, go to the sticky menu settings and enable the sticky menu feature.

Then do the following:

• Select other class or ID under the sticky class section
• Add the class or ID of the header

Here’s an example:

⚠️ Note: To quickly find your header’s ID/Class, install CSS Peeper as a Chrome extension or you can use the browser’s inspect tool.

From there, adjust any desired settings to match your website’s design and branding, such as background and opacity.

Once you’re done, don’t forget to scroll down and click the save button — and then refresh your website to see the changes.

By the way, if you don’t want to use this plugin, you can use another sticky header plugin. There are a few similar WordPress plugins available.

Method 3: Install a theme with this feature

If you haven’t started your website yet, it might be easier to start with a WordPress theme that supports this feature.

Here are some of the themes with a sticky header feature:

1. Flatsome

Flatsome is a multi-purpose, responsive WooCommerce theme known for its extensive customization options, including the ability to create a sticky header.

Flatsome’s sticky header feature is highly customizable, which allows you to adjust it to suit your website’s design and functionality needs.

👉 Related: Flatsome Theme Review: Still Good Fit For Your Store?

2. Woodstock

The Woodstock theme is a modern, fully responsive, and retina-ready WooCommerce theme.

The theme is compatible with WordPress 6.x and WooCommerce 8.x, and offers a range of features to enhance user experience and your website’s functionality.

3. X Theme

The X Theme is a highly versatile, best-selling multi-purpose WordPress theme.

It’s known for its extensive pre-built layouts and configurations, as well as an impressive front-end page builder tool.

Making a Responsive Sticky Header

Creating a responsive and well-designed sticky header for your WordPress website can significantly enhance user navigation and engagement.

Always make sure to preview your changes across different devices and browsers to ensure that the sticky header behaves as expected.

Besides the steps I included here, you can actually use a custom CSS code on the header element — but that’s a little advanced.

Don’t forget to test your sticky header on different devices and browsers to ensure it works as intended. 😀