Home / Wordpress Tutorials / How to make a sticky menu on scroll in WordPress – Any theme
Wordpress Tutorials

How to make a sticky menu on scroll in WordPress – Any theme

How to make a sticky menu on scroll in WordPress

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. 🙂

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

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

Simple Custom CSS and JS

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
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"); 
  }
}

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. Add your JS code to the footer.

How to make a sticky menu on scroll in WordPress

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

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

That’s how to make a sticky menu on scroll in WordPress. In almost any theme. Really simple. If you are using Divi in 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.

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 color to the sticky header etc. Have fun. 😀

How to make sticky custom headers in Divi 4.0

One Comment

  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.

Leave a Reply

Your email address will not be published. Required fields are marked *