How to Make a Sticky Header in WordPress (with & without a plugin)

By now, you’re well aware of the popular design trend called the sticky header (aka: “sticky menu” or “fixed header”). It’s a technique employed by hundreds of thousands of websites, from tech giants like Facebook & Google, to mom-and-pop shops running on WordPress.

This article will explore all the possible ways of creating a sticky header in WordPress. First, I’ll talk about the arguments for and against sticky headers. Then, I’ll test out a handful of WordPress sticky header plugins, and offer up our top recommendation. And finally, for those who prefer not to use a plugin, we’ll explore a few ways to create a sticky header using code.

• What is a sticky header?
• Sticky header pros & cons
• Does sticky header functionality belong in a theme or plugin?
• Sticky header WordPress plugins
• Sticky header using code

TL;DR – Generally, sticky headers are best incorporated into your theme, but if you need to use a plugin, myStickymenu is the best sticky header plugin for WordPress.

What is a sticky header?

To understand a sticky header, let’s break it down into two words.

Header refers to the top-most portion of a website. Typically, a website header consists of some combination of the following:

• a logo, or website title
• some navigation links (aka: menu)
• possibly a search bar
• maybe some social media icons, or other contact information
• common actions (i.e. notifications, shopping cart, etc.)

Sticky means that this part of the webpage remains in view, even as a user scrolls down the page. Typical behavior is for elements to move upwards on the screen, and out of the viewable area, as a user scrolls down the page. But a sticky element remains “stuck” to the top of the viewport.

Here’s an example of Facebook’s sticky header:

Sticky menus/headers are different from notification bars. Our friends at WP Buffs wrote a nice piece on WordPress notification bar plugins.

Sticky Header Pros & Cons

If implemented well, there are very few downsides. However, not all sites need to go this route. Let’s take a look at the pros & cons, and see if a sticky header is a good fit for your site.

Pros

Faster Navigation

According to a usability study by Smashing Magazine, sticky headers make a site “22% quicker to navigate.” That equates to 13 seconds for every minute spent. A 5-minute website visit would get knocked down to under 4 minutes.

Preferred by Users

This might sound rather subjective, but it was another metric that Smashing Magazine looked at in their study. Of the 40 people who were asked to complete a task, none of them could identify the difference between a sticky header site and non-sticky header site. However, when asked at the end of the test if they preferred one over the other, 100% preferred the site with the sticky header.

Higher Conversions

I couldn’t find any research to prove this theory, but if you know of a study, please let me know.

I suspect, however, that if you include a call-to-action (CTA) in a sticky header, you’ll likely experience a higher conversion rate than with a normally scrolling header. That CTA could be a sign up button, phone number or some kind of cart checkout for an ecommerce site.

Just think, if you had to scroll to the top of your Facebook feed to check your notifications, do you think it would happen as often? Probably not.

Cons

There aren’t many. From my research, several of the cons are outdated, and don’t apply to the current state of the web. The drawback of sticky headers mainly comes into play when they are not well thought out, or designed poorly. Therefore, all of these can really be avoided with proper planning and good design.

Takes Up Too Much Space

This is arguably the biggest drawback, and I’ve personally witnessed it in action. On smaller devices, if your sticky header is really tall, it can cover too much of the screen.

How tall is too tall? There is no exact answer, but here are some examples & basic guidelines:

• Facebook’s sticky header is about 44px tall
• Twitter goes to about 48px
• Google’s Material Design spec for mobile says a touchable area should be no less than 48px tall

That seems to imply that around 45-50px is a good height for a sticky header. I would recommend not going much taller than that, especially on mobile.

Annoying or Distracting

Another criticism of sticky headers is that they can be annoying, and distract the user from the content they are trying to absorb. This can certainly happen, especially if you use flashy transitions or animations to show/hide your sticky header as the user scrolls.

If you take note of most native mobile apps, as well as popular desktop apps you use, almost none of them use animations for their sticky elements. Think Facebook, Instagram, Twitter & Gmail on your phone, and Photoshop, Spotify & word processing apps on your computer. The essential components of the app load immediately on screen, and stay there. Period.

I think we should approach web design & sticky headers in much the same way.

Is a sticky header right for you?

All of the following scenarios are good reasons to consider using a sticky header on your website:

• your site has a lot of content
• your site uses infinite scroll, or has incredibly long pages
• you’re trying to get users to sign up for an account
• your site is a web app with commonly used buttons/links
• your site has important pages that a user visits frequently (check your analytics data)
• you want to keep a search bar always visible
• you run an ecommerce shop (cart should always be accessible)

Before we take a look at sticky header plugins, I want to address the question…

Does sticky header functionality belong in a theme or a plugin?

This is more a question for developers (and the uber-curious), so if you’re just here for sticky header plugins, skip to the next section.

I got about 75% of the way through writing this post, and it dawned on me. Should sticky header plugins even exist, or should this be something that is built into your WordPress theme?

I’m not sure I can give a definitive answer. I lean more towards the theme, but let’s brainstorm for a minute.

I initially thought theme, because a sticky header is more of a design decision than it is a question of functionality. You could argue that certain features (scroll depth, only show on scroll up, etc.) are more function than they are design, but you’d probably reevaluate them each time you did a site redesign.

One question I ask myself when determining if something belongs in a theme or a plugin is, “Do I want this to work the same way each time I redesign my site or choose a different theme?”

If the answer is yes, then I’ll typically consider it plugin territory. If it will likely be different with each redesign, than it belongs in a theme.

Also, WordPress theme designers pay close attention to how they design the header and main menu in their theme. In making certain design decisions, they might not take into account that the header/menu will be sticky.

Because of this, you could be negatively impacting the user experience by forcing the menu to stick. Or custom code might be required to make the sticky menu work with the theme’s menu design (which would likely require CSS coding knowledge).

However, it is possible that you’d always want your header to behave in the exact same way, regardless of your site’s design. This argument is more plausible especially for web apps. If your header, or wannabe sticky area, contains necessary buttons or components of the page, you could redesign the app, but want to keep a toolbar stuck to the top of the viewport.

While there are some use cases where I understand the argument for sticky header plugins, generally speaking, I think this functionality should be included with the theme, not in a plugin.

With that said, there are going to be times when you have a theme that you love, changing it isn’t an option, and you just want a sticky header, dangit! For those moments, I present to you our list of free sticky header WordPress plugins.

Sticky Header WordPress Plugins

If you’d like to implement a sticky header in WordPress, and your theme doesn’t already provide the functionality, there are quite a few sticky header plugins that can help. I’m going to evaluate each one, and provide you with my best recommendation. All of the following are free plugins.

myStickymenu Plugin Top Choice

myStickymenu is one of the more popular sticky menu plugins, as well as being very well maintained by it’s developer, damiroquai. It has just enough features without being overwhelming, and provides easy customization through the use of custom CSS.

Why do we consider myStickymenu to be the best sticky header plugin for WordPress?

• stick any element to the top of your browser using a custom class or id
• customize the background color & opacity of your header
• custom classes are added to the element when stuck and unstuck
• disable on smaller screens
• use custom CSS via the plugin settings
• disable all CSS and write your own
• choose between fade or slide effect
• completely disable on specific post & page types

Get myStickymenu Plugin

Here’s a quick look at myStickymenu’s settings:

NOT Recommended

After testing each of these, we are recommending you NOT use any of the following sticky header WordPress plugins.

Sticky Menu (or Anything!) on Scroll by Mark Senff

This is the most popular sticky menu plugin in the WordPress repository (in terms of active installs), and it also gets rave reviews. However, it’s not without its flaws.

The following reasons are why I’m not recommending it:

• It injects inline styles for positioning, width & spacing (as opposed to using a CSS class), making it harder to customize
• If your sticky element has a transparent background, you’ll need to add custom CSS to add a solid background color

Awesome Sticky Header by DevCanyon

The Awesome Sticky Header plugin by DevCanyon might look promising on the surface, but it has way too many settings, and is not very intuitive. It was also designed to be a complete header replacement solution, and not simply a sticky header plugin.

It adds an entirely new set of HTML elements at the bottom of your page, and completely bypasses your existing menu.

I also found that several pages on the author’s website, including their “dedicated support page,” return a 404 error.

The author promotes a premium version of the plugin on CodeCanyon called Awesome Header. This version includes even more features, as well as support. I have not tested the premium version, but if all you’re looking for is a simple sticky header solution, this is not the best plugin for the job.

Sticky Header by Webdesi9

I found this sticky header plugin just doesn’t work as well as our top choice. I do appreciate it’s simplistic jQuery approach, though. It adds/removes a single class to the header element, and makes it stick using CSS.

The downsides:

• the end of my menu gets cut off
• it adds empty CSS rules to the page, even when you don’t define any

I wouldn’t recommend it, simply because myStickymenu just does a better job.

Sticky Header by ThematoSoup

There are a few things I respect about how ThematoSoup created their sticky header plugin, but the downsides are enough for me not to recommend it over myStickymenu.

I do appreciate how they:

• use the Customizer to manage settings. Ultimately, this is where sticky header settings belong.
• keep the settings to a minimum, providing just the essentials

But now, the downsides:

• It adds additional markup to the top of the page, essentially creating an entirely new menu
• It uses JavaScript to inject an inline style of margin-top to show/hide the header, making it very hard to customize
• You have to select a pre-built WordPress menu, therefore limiting what elements can be included in the sticky header to just a logo + one menu
• It doesn’t appear to support dropdown menus. Only the top-level menu items are shown.

It’s really more of a sticky menu plugin than it is a sticky header one.

If all you need is a logo & one super-simple WordPress menu, this plugin could work, but because of how it’s implemented and it’s lack of options, I would not recommend it.

Fixed and Sticky Menu by Arjun Thakur

I highly recommend NOT using this plugin. When I installed it on my site, it threw multiple errors, and flat out did not work.

That does it for our list of sticky header WordPress plugins. But I know some of you would rather implement your sticky header without a plugin. In the following section, I’ll provide example code you can use to build your own sticky headers & menus in a variety of ways.

WordPress Sticky Header using Code

We’ll start off with the most basic form of a sticky header. This method requires the smallest amount of code, but is also the least flexible.

Simple, Fixed Header (CSS only)

This method only works if your header or menu is already at the very top of the viewport. It must be the first element on the page.

You can simply add the following CSS to your header element. For example, if your header had a class of site-header, you would use the following CSS:

.site-header {
	position: fixed;
	width: 100%;
	z-index: 1000;
}

This will move your main content area (whatever comes immediately after your header) behind your header, instead of below it. We need to bump the main content area down so none of it gets cut off. For this, we’ll identify the height of our header element, and apply it as padding to the top of our main content area.

.main-content {
	padding-top: 50px; /* adjust this to match the height of your header */
}

And that’s it. Now you have the most basic form of a sticky header at the top of your site.

Sticky Header After Scroll Depth (jQuery)

Chris Coyier has an excellent tutorial on how to make any element sticky after a certain amount of scroll depth on the page. If you’re in a hurry, here’s the code:

[codepen_embed height=”380″ theme_id=”0″ slug_hash=”AdaKr” default_tab=”js,result” user=”chriscoyier”][/codepen_embed]

Add Animation Effects

With this method, it’s possible to add animation effects to your sticky header once it becomes “stuck.” In Chris’ example, he adds the class .fix-search to the main container to create the sticky effect.

Instead, let’s assume you add a class of .sticky to the header element itself. The HTML of your sticky header should then look like this:

<body>
	<header class="site-header sticky">
		...header items here...
	</header>
	<main class="main-content">
		...content here...
	</main>
</body>

Notice the .sticky class on .site-header. Since this gets added or removed, based on whether or not our header is sticky, we’ll use it to add our animation.

Your CSS would look something like this:

.site-header {
	height: 80px;
	transition: all 200ms ease;
}
.site-header.sticky {
	position: fixed;
	width: 100%;
	z-index: 1000;
	height: 50px;
	opacity: 0.9;
}

This would shrink the sticky header from 80px to 50px tall, and make it 10% transparent. You can add whatever styles you’d like. The key is adding transition: all 200ms ease; on the .site-header. This will make your sticky header animate.

That does it for our in-depth guide on sticky headers in WordPress. If you have any other methods not listed here, or find a better plugin, please let me know in the comments.