Home / Wordpress Tutorials / How to make a sticky header in WordPress – Any theme
Wordpress Tutorials

How to make a sticky header in WordPress – Any theme

Hello, today I am going to tell you how to make a sticky header 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 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.

sticky header 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("zonic-sticky"); 
  } else { 
    header.classList.remove("zonic-sticky"); 
  }
}

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.

custom css and js

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.

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

That’s how to make a sticky header in WordPress – 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 to 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

Similar Posts

Leave a Reply

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