Skip to content

How to Create a Sticky Header in WordPress (4 Methods)

If you’re looking for a quick way to make your website more user-friendly, one great idea is to create a WordPress sticky header. This way, your menu items (and other header elements) remain visible and easily accessible at all times. However, you might be concerned that this feature is difficult to set up. ⚙️

Fortunately, there are plenty of ways to build a sticky header in WordPress, so you’re sure to find an option that suits your skill level and available time. Beginners can install a plugin or use the Full Site Editor (FSE) to simplify the process. More experienced users can make a custom sticky header using CSS.

WordPress sticky header.

In this post, we’ll take a closer look at sticky headers and discuss some best practices. Then we’ll show you four ways to create a WordPress sticky header. Let’s jump right in! 🦘

📚 Table of contents:

  1. Use a plugin like Sticky Menu & Sticky Header
  2. Add a sticky header using the Full-Site Editor (FSE)
  3. Create a sticky header using CSS
  4. Install a premium theme with a built-in WordPress sticky header

What is a sticky header (and why should you use one)?

A WordPress sticky header is also known as a “fixed header,” since the header remains visible even when visitors scroll down your page. This way, people can still access your navigation menu even as they interact with your website.

As such, a sticky header is a great way to improve your site’s user experience (UX), since it makes your web pages easily accessible. This enables people to find what they’re looking for quickly, which can help you reduce bounce rates and increase time on site.

Better yet, a sticky header encourages visitors to explore other areas of your site. For instance, if you run an ecommerce shop, customers may see interesting products or categories listed in the header. This provides a valuable opportunity to increase your revenue.

Meanwhile, you can include all sorts of elements in your WordPress sticky header. For example, you might feature a call to action (CTA) button, which could boost conversions if it’s visible at all times. You might also add your logo, social media links, shopping cart icon, or business hours.

Best practices for creating a WordPress sticky header

Since a WordPress sticky header should improve your site’s UX, it’s important to consider some best practices to make sure it’s as user-friendly as possible. Here are the key factors to keep in mind:

  • 🤏 Make it small. If your header is visible at all times, you don’t want it to take up too much screen space and interfere with your main content.
  • 😎 Keep it simple. While it can be a good idea to include useful elements like CTAs and logos, avoid packing your header with too many components that might cause distractions.
  • 🎨 Apply your brand colors. To make sure your header fits in with the rest of your website, it’s essential to choose fonts and colors that reflect your branding.
  • 🎯 Focus on value. Since you don’t want to overcrowd your header, it’s best to pick the menu items that are most relevant (and useful) to your visitors. For example, if you run an ecommerce store, it’s a good idea to prioritize the shopping cart icon and search bar.
  • 📱 Create a separate menu for mobile devices. Since mobile screens are much smaller than desktops, you can create a separate (smaller) sticky header with reduced font size and more hidden menu items. This way, you can offer a better mobile experience.
  • 🎬 Add a hover animation. To make your header less invasive, it’s a good idea to make it transparent when it first loads. When a visitor hovers over the header, you can change the background to a solid color so that your menu items are easier to see.

The key is to build an effective sticky header without distracting from your main content. It may take some experimentation to strike the right balance, but the following methods will help to simplify that process.

How to create a WordPress sticky header (4 methods)

Now that you know why it’s a good idea to create a sticky header, here are four ways to do it in WordPress. Each approach offers its own pros and cons, so we’d recommend reading through all four before selecting the method that’s the best fit for your website.

1. Use a plugin like Sticky Menu & Sticky Header

The simplest way to create a WordPress sticky header is to use a plugin. This is a beginner-friendly method, since you don’t need to use code. Plus, the Sticky Menu & Sticky Header plugin works with just about any WordPress theme.

To begin, you’ll need to install the plugin through the WordPress dashboard. Go to PluginsAdd New, and find the plugin using the search bar. Then click on Install NowActivate:

How to create a WordPress sticky header with plugin.

To set up your sticky header with the plugin, head to Settings in the WordPress sidebar and select Sticky Header (or Anything!). Since the plugin lets you create all kinds of sticky elements, you’ll need to enter the ID or class for your theme’s header in the Sticky Element box.

How to make a sticky header in WordPress.

If you don’t know your header’s ID or class, open your website in a new tab. Then, right-click in the header area and click on Inspect Element.

Some of this plugin’s settings are only available with the premium version. For example, if you want to apply a background color to your sticky header, change the opacity, and add other effects, you’ll need to upgrade.

However, you can use the Basic settings to define spacing between the top of the page and the sticky header. Plus, you can disable the sticky header on very large or small screens, where it may not display properly.

Then, click on Save Changes and test your sticky header on the front end.

Preview the WordPress sticky header.

Scroll down on the page and watch to see how the header responds. Does it stay in view as you move elsewhere? Does it have fluid movements? If so, you’re good to go!

2. Add a sticky header using the Full-Site Editor (FSE)

Neve FSE theme.

If you use a block theme, you can create a WordPress sticky header using the built-in functionality offered by the Full-Site Editor (FSE).

If you don’t already have one, you should first install a block theme like Neve FSE. This theme provides a modern, minimalistic design that suits many types of websites, like blogs, portfolios, or ecommerce shops.

Then, in your dashboard, go to Appearance > Editor and find the template for your theme’s header. This will likely be stored under Templates or Patterns, but it depends on your chosen theme.

In Neve, you’ll find it under PatternsHeaderHeader. Then click on the pencil icon beside the template to get started.

How to create a WordPress sticky header with the FSE.

Open the settings in the top-right corner beside the Save button. Select the header in the editor, and click on Group in the toolbar.

Alternately, in the block settings, you can click on the group icon to gather all of your header items inside a container.

How to group header items together.

Now, scroll down and open the Position tab. Use the drop-down menu to select the Sticky option.

Enable sticky header in the FSE.

The header will appear transparent upon scrolling, so you might want to apply a background color. To do that, switch over to the Styles tab. You can also change the typography and dimensions of your header there.

Give your sticky header a background color.

Finally, click on Save and preview your sticky header on the front end of your site! You can always return to make further changes until your header looks just right.

3. Create a sticky header using CSS

For more experienced users who don’t want to rely on plugins (or want more complete control), you can create a sticky header manually using CSS. To get started, open the WordPress Customizer by going to AppearanceCustomize. Then locate the Additional CSS tab.

How to create a WordPress sticky header using CSS.

Enter the following code into the CSS box:

#site-navigation {
    background:#00000;
    height:60px;
    z-index:170;
    margin:0 auto;
    border-bottom:1px solid #dadada;
    width:100%;
    position:fixed;
    top:0;
    left:0;
    right:0;
    text-align: center;
}Code language: CSS (css)

You’ll need to replace “#site-navigation” with your website header’s CSS class or ID. If you’re not sure how to find this, see the relevant instructions in method 1.

You can also change the header color by entering a different hex code after “background.” Plus, you can customize the height, width, and other display settings by adjusting the relevant parts of the code. Then, click on Publish to make your new header live.

4. Install a premium theme with a built-in WordPress sticky header

Create a sticky menu with a premium WordPress theme like Neve Pro.

The final way to build a WordPress sticky header is to install a theme that has this functionality built-in. While this is the more expensive option, it enables you to add the feature without relying on plugins or using code. It’s relevant if you’re creating a new website and haven’t settled on a theme yet.

There are plenty of great themes that come with ready-made sticky menus (or that let you make your existing menu sticky). One example is Neve PRO.

Even with the free version of Neve, you can build custom headers and footers using an intuitive drag-and-drop editor. However, you’ll get even more settings with the premium theme, such as advanced styling options and new components. This way, you can build mobile headers, transparent headers, and sticky headers.

Once installed and activated, go to Appearance > Customize in your WordPress dashboard. Select the Header option.

The Neve Pro theme customization options.

Neve Pro lets you set up multiple headers on your site and customize them. To make a header sticky, select it and choose the Stick to top option.

Creating a WordPress sticky header in Neve Pro.

To the right of that option, determine whether you want the header to be sticky on desktop devices, mobile devices, or both. Just select the relevant icons.

Adding a WordPress sticky header to the mobile version of a website.

After that, hit Publish, or continue to customize your header using Neve Pro’s built-in tools and options.

Conclusion 🧐

A sticky header enables visitors to view and access menu items from any page on your website. Better yet, you can include elements like CTAs and your business logo to improve brand recognition and boost conversions.

👉 To recap, here are four ways to create a WordPress sticky header:

  1. Install a plugin like Sticky Menu & Sticky Header.
  2. Add a sticky header in the Full Site Editor (FSE), using a block theme like Neve FSE.
  3. Create a sticky header using custom CSS.
  4. Install a premium theme with a built-in sticky header, such as Neve PRO.

What type of WordPress sticky header are you building for your website? Let us know in the comments below!

Don’t forget to join our crash course on speeding up your WordPress site. Learn more below:

 
Yay! 🎉 You made it to the end of the article!
John Hughes

1 Comment
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
hslee
April 23, 2024 1:58 am

Hi, I read your post very well.
I wanted to have a sticky header without plug-in or adding some codes. So I followed instructions in 2. Add a sticky header using the Full-Site Editor (FSE) but it does not work.

Header is being scrolled, it hasn’t changed sticky.

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!

1
0
Would love your thoughts, please comment.x

Most Searched Articles

Best JavaScript Libraries and Frameworks: Try These 14 in 2024

In this post, we look at the best JavaScript libraries and frameworks to try out this year. Why? Well, with JavaScript being available in every web browser, this makes it the most accessible programming language of ...

20 Best Free WordPress Themes for 2024 (Responsive, Mobile-Ready, Beautiful)

If you're looking for only the best free WordPress themes in the market for this year, then you're in the right place. We have more than enough such themes for you right ...

12 Best WordPress Hosting Providers of 2024 Compared and Tested

Looking for the best WordPress hosting that you can actually afford? We did the testing for you. Here are 10+ best hosts on the market ...

Handpicked Articles

How to Make a WordPress Website: Ultimate Guide for All Users – Beginners, Intermediate, Advanced

Many people wonder how to make a WordPress website. They’ve heard about WordPress, its incredible popularity, excellent features and designs, and now they want to join the pack and build a WordPress website of their own. So, where does one get ...

How to Start an Ecommerce Business: Ultimate Guide for 2024

Is this going to be the year you learn how to start an eCommerce business from scratch? You’re certainly in the right place! This guide will give you a roadmap to getting from 0 to a fully functional eCommerce business. ...