How to make a sticky menu on scroll in any WordPress theme: 2021 update

Hello, today I am going to tell you how to make a sticky menu on scroll in WordPress in almost any kind of theme, with a simple JavaScript code. And of course, with a few lines of CSS too. 🙂

Step One: Create Your Header

I am using the default WordPress 2020 theme for this tutorial. The theme is nice and well-optimized but just a basic one. First of all, create your header the way you want. Add the logo, create the menu, etc. etc.

sticky header in WordPress

Step Two: Add Your Custom Codes

Now we need to add some CSS and JS to the site. For this part, we have several methods but It’s always easier to use a simple plugin called Simple Custom CSS and JS. To install that go to Plugins > Add New and then search for Simple Custom CSS and JS plugin.

Simple Custom CSS and JS

Once you found it click on Install Now to install it and activate it. Now you will get a new menu item called Custom CSS & JS. Click on Add Custom JS and add the following code.

How to make a sticky menu on scroll in WordPress

If you need more information on how to add a custom code to WordPress, please check this article on How to add Custom CSS to WordPress: Beginner’s guide

window.onscroll = function() { 
var header = document.getElementById("site-header"); 
var sticky = header.offsetTop + header.offsetHeight; 

function stickyHeader() { 
  if (window.pageYOffset > sticky) { 
  } else { 

How to make a sticky menu on scroll in WordPress in Any theme: final Step

Add your JS code

See the below part of the code. It is where we target our themes header. If you are going to try this method on other themes than the WP default 2020 theme, you have to find the ID of the wrapper element of the header. Then change the ID inside the code to assign it. (Hope you got it. In any case, you need help just comment below. Always love to help :))

var header = document.getElementById("site-header");

On the left sidebar of the window, you will see an Options panel. And there is an option to set where to add the code on the page. To the header or footer. It’s always a good practice to add your JS codes to the website footer.

How to make a sticky menu on scroll in WordPress

Add your CSS code

Next, add our simple CSS snippet. Custom CSS & JS > Add Custom CSS. Now paste the below snippet inside and save. You can load this in the header.

.ds-sticky { 
  position: fixed !important;
  left: 0;
  right: 0;

As one of your readers commented below, in some themes you will have to add a z-index to bring the header on top of all other elements. Just play with that if you see the header disappearing when scrolling.

Is the header disappearing when scrooling?

That’s how to make a sticky menu on scroll in WordPress. In almost any theme. Really simple. If you are using Divi on your site, please follow the below method instead(Link is at the bottom of the post). Different from this one but simple and easy to follow.

Thats how to make a sticky menu on scroll in any WordPress theme. The easiest way. No 3rd party plugins used which is the best for the best performance. 🙂

Now you can make any header sticky within a few minutes in WordPress themes. This method will work on most themes without any additional efforts. Comments below if you need any help. Also, you can play with the CSS snippet I have provided. Try adding a different background colour to the sticky header etc. Have fun. 😀

How to make sticky custom headers in Divi 4.0

2 thoughts on “How to make a sticky menu on scroll in any WordPress theme: 2021 update”

  1. Thanks – worked for me after a good couple of hours hating on wordpress. Needed to add a z-index value to the header though.

  2. Thanks, but…… Why do you not mention a location for that function code? And why do you tell us to ASK YOU if we want those instructions? Shouldn’t it be on the page?


Leave a Comment