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

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.

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.

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.

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() { 
  stickyHeader() 
}; 
var header = document.getElementById("site-header"); 
var sticky = header.offsetTop + header.offsetHeight; 

function stickyHeader() { 
  if (window.pageYOffset > sticky) { 
    header.classList.add("ds-sticky"); 
  } else { 
    header.classList.remove("ds-sticky"); 
  }
}

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.

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 scrolling?

That’s how to make a sticky menu on scroll in WordPress. In almost any theme.

That’s how to make a sticky menu on scroll in any WordPress theme. It is the easiest way with no 3rd party plugins being used which is the best for improved 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 effort. Comments below if you need any help. Also, you can play with the CSS snippet I have provided. Try adding a different background color to the sticky header etc. Have fun. 😀