Tutorials WordPress

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

Updated

Written by

Dave Warfel

Reading Time

13 minutes

If you buy something from one of our links, we may earn a commission.

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.

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:

Facebook sticky header example

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:

myStickymenu WordPress plugin general settings
General settings for setting up your sticky header
myStickymenu plugin design settings
Customize the design of your sticky header
myStickymenu plugin advanced settings
Select which page & post types use the sticky header

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.

Sticky Menu (or anything!) on Scroll WordPress plugin

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.

Awesome Sticky Header WordPress Plugin by DevCanyon

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.

Sticky Header WordPress plugin by webdesi9

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.

Sticky header plugin by ThematoSoup

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.

Fixed & sticky header WordPress plugin


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.

Dave Warfel

LinkedIn  •  X (Twitter)Dave has been working with WordPress since 2011. He's built 100s of client sites and almost a dozen of his own. He's tested almost every plugin you can think of, hosted with at least 10 different companies, and gone down every SEO rabbit hole you can imagine. When's he's not tinkering with new software, you'll find him in the mountains of Colorado, trail running, summiting peaks, and rippin' downhills on his mountain bike. 🏔️🏃🚴🤸

47 responses to “How to Make a Sticky Header in WordPress (with & without a plugin)”

  1. Lex Avatar
    Lex

    After search for too many plugins, myStickymenu wad really the best option. and i got it from your post. Thank you very much

    1. Dave Warfel Avatar

      Lex — I can’t tell you enough how happy this makes me. The reason I wrote this post, and what I try to do with all roundup-type posts I write, is to make it easy for the user to make a choice. There are too many “here at the 10 best” articles out there, and they don’t help you make a decision.

      I spent a good bit of time trying each one out, and I’m thrilled that effort helped you make the right choice :-)

  2. sokhom Avatar
    sokhom

    Very comprehensive ! one stop site for the sticky !
    Thank you very much !

    1. Dave Warfel Avatar

      You’re welcome :-)

  3. John Avatar
    John

    I was so disappointed in the other plugins you have listed, and they didn’t work. But after a few days of trying them I looked for how to modify the css to fix the header, and that’s how I found your site.
    I installed the myStickymenu plugin, and holycr**, it works just perfectly.

    Thank you so much for posting this info. Too Cool.

    1. Dave Warfel Avatar

      Sorry you had to go through all the other sticky header options before you found a reliable one… but I’m glad you found it :-)

  4. Soheil Avatar
    Soheil

    Almost gave up on adding the sticky header on my site as I couldn’t design other plugins to look as how I want them.
    Just did the lat search and wow! find your post suggesting the myStickymenu, simply just does the job.
    Thanks Dave, very clear and comprehensive post.

    1. Dave Warfel Avatar

      So glad to hear, Soheil 🙂.

      My main goal with this post was to help folks find the best sticky header solution because there are SO MANY options out there that just aren’t that good.

      I’m glad you’re happy with myStickyMenu. And thanks for taking the time to comment.

  5. Julie Avatar
    Julie

    Hello, I just installed the myStickymenu plugin on my website after reading your post. The thing is, some of my menu’s sections are longer than the screen, so my menu is cut in half now. When I scroll down, with the fixed header, only the part of the menu that fits the screen show. Is it something I can change in the settings? I tried adding a scrollbar inside the menu but it only works with the hamburger, not with the desktop version.
    Thank you for your help

    1. John McLeod Avatar
      John McLeod

      Hi Julie,
      I think you mean the menu and drop downs don’t fit right, not that they are too long for the page; correct?
      If so, you should be able to adjust the size and spacing in the WP/Cusotmize/header section. I too had to adjust those settings to make it ‘fit’ including the drop down spacings. Now it looks great. I’m using about 90% opacity on a black and gold header. I did have to spend a lot of time adjusting it all, and readjusting for mobile.

      Good Luck!

      And Thanks again to Dave for his programming genius.

      John McLeod

    2. Dave Warfel Avatar

      Thanks for your help, John. I really appreciate you stepping in to lend a hand.

      Julie, please post again if John’s solution doesn’t fix your issue.

  6. Crisp Excel Avatar
    Crisp Excel

    You are a lifesaver!

    Great Plugin.

    1. Dave Warfel Avatar

      Thanks Crisp 😊.

  7. Ally Avatar
    Ally

    Thank you Dave, your article was very helpful! You saved my head :)

    1. Dave Warfel Avatar

      Glad to hear, Ally 😀. Your head is so very valuable so I’m especially glad I could play a role in saving it 🤯😂.

  8. Erick Garcia Avatar
    Erick Garcia

    Man, this post is very very good. Thank you! But i am a beginner and is a little hard to me to input these codes on my Ocean WP Theme. I want to insert the codes in my website, but i do not know where i’ll do it. Can you make a step by step tutorial to show that? Thank you.

  9. John McLeod Avatar
    John McLeod

    Hey Eric, just get the myStickymenu plugin, it works great. Unless you want to learn code. :)

  10. Mario Avatar
    Mario

    Hi Dave,

    great article, very thankful for that!
    One question: Is it also possible to only have an image (e.g. logo) apprear / fade in and be sticky when scrolling and disappearing when scrolling back to the top again? And if so: Do you have any (code) idea how? ;)

    Thanks a lot in advance!

    Cheers

    Mario

  11. John McLeod Avatar
    John McLeod

    Hi Mario,

    This is the only post I comment on, because Daves plugin works so good. I hope he doesn’t mind my comments.

    I did exactly what you wanted, and it works and looks great.
    Just set the header logo/image, set the opacity and time to fade in, and there you go.
    I don’t need the publicity, but you can view mine at http://www.mcleodcomputers.com.

    Thanks to Dave again!!!

    John

    1. Dave Warfel Avatar

      Thanks John. I really appreciate you helping out in the comments 👍.

  12. Abhishek Suman Avatar
    Abhishek Suman

    I want to creat solid 3d notification bar like in wpbeginner.com after header can you help me?

    1. Dave Warfel Avatar

      Sorry Abhishek, but what WP Beginner has is a custom job. I can’t provide that at this time.

      You could search for a “notification bar” or “slide-in” plugin that might provide similar functionality.

  13. Amit Rawat Avatar
    Amit Rawat

    very helping post, let me try that code on my website. knowandask.com
    will the website logo also fixed with the above code?

  14. James Avatar
    James

    Thanks for sounds a detailed and informative article.

    Now, what if my theme already comes with a sticky menu and what I would like to make sticky is one of the widgets in my blog’s right column?

    What would you recommend?

    1. Dave Warfel Avatar

      Hey James — The best plugin I’ve found for sticky sidebar widgets is:

      Q2W3 Fixed Widget

  15. Chris Blachut Avatar
    Chris Blachut

    I really appreciate that instead of listing everything, you actually recommend what plugins to use and not to use. Nice work!

    I’m looking for a way to stick not my site’s header but post outlines to the top of posts. So when the reader scrolls down a guide of mine, they see which section of the post they are in and can quickly click (via drop-down) to other sections within that same post. Here’s an example (kind of) of what I’m looking for: http://tradevalue.theringer.com/.

    Would any of these plugins, or others you know of, work for this?

    1. Dave Warfel Avatar

      Hi Chris,

      None of these plugins would work for that. But I use the Q2W3 Fixed Widget plugin. It was designed for widgets, but I think it allows you to specify class & ID names to stick specific elements.

      Some page builders also offer this ability. I know Elementor does. But I wouldn’t install a page builder JUST for this. If you have a need for one, Elementor is a great choice, and does let you stick elements as you scroll.

  16. lhoucine Avatar
    lhoucine

    Awesome, works as expected :)

  17. Kashif Avatar
    Kashif

    Everything looks fine, but when it comes to adding Javascript, I can’t find where to put that code..
    Javascript is the only reason my website still without sticky header .

    Please let me know where I have to put javascript code?

    1. Dave Warfel Avatar

      Are you trying to use your own code to achieve a sticky header? If you use the plugin we recommended, you shouldn’t need to add JavaScript anywhere.

      If you’re using a non-plugin method that requires JavaScript, you would usually write your code in its own file, save it as a .js file, upload it to your server, and link to it from your header or footer. With WordPress, you can use a plugin to add JavaScript. This article explains it in more detail.

  18. Dami Avatar
    Dami

    Hi Dave, thanks to this.
    My theme comes with a sticky menu bar. I can’t seem to find anywhere to change the logo.

    What do I do? I just want to change the logo on the sticky menu.

    Thanks for your help.

    1. Dave Warfel Avatar

      Two things you can try:

      1. Go to Appearance > Customize, and look for “Site Identity,” “Sticky Header,” or “Sticky Menu.” See if any of those panels have an upload logo option.

      2. Ask your theme developer for help

  19. Fabiola Avatar
    Fabiola

    Great article, it help me so much!

    But I still nedd some help, please!
    https://oltransportes.com/

    My header is too big, so when sticked, gets many space.
    So… I would like to stick just the superior part of header.
    Just the div.contentor with the logo and info, and not the nav.menu.

    I’v tried this and it almost works!

    .site-header {
    position: fixed;
    height: 110px;
    width: 100%;
    z-index: 1000;
    padding-bottom: 10px;
    }

    Any thoughts on how should I make it, please?!

    1. Dave Warfel Avatar

      Hi Fabiola — I see your site is using Elementor. I recommend you use that to create your sticky header. I think it’s more flexible than the solution I’ve outlined here.

      These might help:

  20. RA Avatar
    RA

    Hi Dave,

    Help! How can I make the menu only to be sticky (not the whole header). I think that your section “Sticky Header After Scroll Depth (jQuery)” is the answer but I can’t make it. Tried to add the JS using the Header and Footer plugin you mentioned but it’s not working. https://tradingenligne.fr/

    1. Dave Warfel Avatar

      Sorry RA, but I don’t have the bandwidth to help right now. I’m also not that good with JavaScript or jQuery :-/. Sorry.

  21. Chips Avatar
    Chips

    Hi Dave, that
    position: fixed;
    width: 100%;

    did work well for me.
    However the height is not working. Do you know why?
    Another question, is there any simple code like those above that can change the background color?
    Thanks!

    1. Dave Warfel Avatar

      Maybe try this:

      .site-header {
      	position: fixed;
      	width: 100%;
      	z-index: 1000;
      	height: 50px;
      	background: #fff;
      }

      Just change the 50px height to whatever value you want, and the #fff to whatever color background you want.

  22. Raphael Avatar
    Raphael

    hey Dave,
    thanks for this post.
    For some reason the plugin and the css are not working for me.
    coulde you maybe help me?

    this is my site:
    enricoiaria.com
    the theme is oceanwp

    thanks in advance

    1. Dave Warfel Avatar

      Since you’re using OceanWP, I would recommend using this instead. It was built specifically for your theme. Stick Anything plugin

  23. Julian Gomez Acevedo Avatar
    Julian Gomez Acevedo

    Thank you very much! I have been struggling with finding a free way to make the oceanwp header sticky and it worked. Great post!

    1. Dave Warfel Avatar

      You’re welcome! Glad you found it helpful 🙂.

  24. John Walsh Avatar
    John Walsh

    If you’re doing without plugin method and its requires JavaScript. Create .js file and upload on your server. Next here is a article to explains it more.

  25. Kerry L Mess Avatar
    Kerry L Mess

    This was really helpful. I’m an educator in a group of high school teachers building a reading website for our students. We’ve got a premium WP plan and can’t use plugins without a business plan. The CSS code seems relatively easy. I’ve got a navigation bar I’m trying to do this with, and I’m a neophyte at all this, so I’m not sure where in all that code to add the CSS code you’ve provided. Does it go before the navigation code? Just after “<!– wp:navigation"? Some guidance would be helpful. Thank you!

    1. Dave Warfel Avatar

      Hey Kerry — The CSS code should be placed in the Customizer. Navigate to Appearance > Customize, then click on “Additional CSS,” and enter the CSS there. Click the Publish button when you’re done.

  26. Kerry L Mess Avatar
    Kerry L Mess

    Thanks, Dave. Forgive my ignorance. When I go into the Customizer, I don’t see a way to work on the page I’m on. I’m looking to do this for only certain pages in the site. Is this possible?

    1. Dave Warfel Avatar

      To apply CSS only to specific pages is doable, but a bit tricky. Are you trying to make your header sticky on some pages and not others? If so, I wouldn’t recommend trying to do this with CSS. You’d be better off using a plugin, or a theme that supports this (like Astra Pro or GeneratePress Pro).

      But to view a specific page in the Customizer, you can go to that page on the frontend of your site, then click the “Customize” link in the top black admin bar. This will open the Customizer and show you a preview of that specific page. You can also use the links in the preview window to navigate throughout your site while remaining in the Customizer. Just click on links as you normally would. The page will reload and the Customizer settings will still be there on the left.

Leave a Comment