How to Create a Sticky Header via Code in a WordPress Website?

You must have seen a sticky header on the websites. It allows your visitors to easily navigate through your menu items even when they have scrolled down. Here I will guide you to easily setup the sticky header using a small code in your WordPress website. Firstly you might be using any theme or Elementor header and footer builder to create your header. You don’t need to worry this tutorial is for everyone. Even if you don’t know how to code, you will be easily able to implement it. There are plugins available to do the same, but they don’t full fill one or the other functionality or are paid ones, hence I am showing you an easy way via code which you can do it yourself without any problem. I am using Astra Theme here, but you can perform this for any theme you have installed.

Topics Covered

Things You Require

To be true all that you require is within your WordPress dashboard and the front end of the website when viewed from the browser in inspector mode. You might have any browser Safari, Firefox, Chrome, Opera, Edge etc. won’t hamper your work. Still let me just point out some things:

A browser in which you are logged in with your WordPress.
A Tab with your front end of the website open.
A plugin “Simple Custom CSS and JS” installed
A CSS and a JS code I will provide you.

What is the procedure?

The detailed procedure has been provided in the video. But here is a “how to do it as a checklist?”:

First Inside your dashboard go to plugins > Search “Simple Custom CSS and JS” plugin, install and activate it.
This plugin will be shown on the WordPress Panel Menu with an option to add custom CSS – Copy the custom CSS code provided below.
Add a custom JS file using the plugin – Copy the custom JS code provided below.
Go to the front end of our website and right click > Inspect.
Using the element selector tool find the complete header id or class. Prefer to find an id, but the class would work just fine.
Copy that id and come back to your CSS code and change “ast-desktop-header” with your id. if its a class make sure to change the “#” to a “.”, so your code will work.
Now open the JS file and do the same change”ast-desktop-header” with your id or class and put “#” or “.” accordingly.
Then change the offset from 600 which I have set to any value you want, it will mean after what distance should the header show once the user has scrolled down.
Check the front end, your header would become sticky.

The Code

Here I am providing the CSS and JS Code for you:

The CSS Code:-

#ast-desktop-header {
  position: relative;
}

@media (min-width: 1024px) {
  #ast-desktop-header.sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
  }
}

The JS Code:-

  window.addEventListener('scroll', function() {
    var header = document.querySelector('#ast-desktop-header');
    if (window.innerWidth > 1024 && window.pageYOffset > 600) {
      header.classList.add('sticky');
    } else {
      header.classList.remove('sticky');
    }
  });

Here is a video guide for you to checkout: –

Need Good Budget Friendly Reliable Hosting and Domain Options?

Here is a list of a few you will not regret. You can click here to get discounts and redirected in a new tab. if you need further discounts you can contact me on live chat.

Hostinger – Most budget friendly, reliable and good server configuration with good features and support. I personally prefer this for myself and my clients.

Fastcomet – I personally use this hosting as well. It offers very good server configuration. you will have discounts initially, but renewal cost is too much. But as far as the servers go very good hosting.

Siteground – Very good hosting, awesome servers, very good support, budget friendly initially, but renewal cost is high. Currently not operating in India.

Bigrock – Decent hosting, and decent budget you can try this as well.

Namecheap – They are very famous for their domain services, but a little new to hosting. I have only heard good reviews about this hosting but not personally used for hosting. But I personally use it to buy domains and I love this service.

WordPress – A little expensive, with limitations on what you can do also no configuration available for server customization as they control everything. But it is optimized for WordPress, hence no problems in performance, just a little expensive with restrictions on what you can do with WordPress.

Kinsta – Very expensive, but top class service, fully optimized servers and you will never complain of a website build on their servers.

Hostripples – Decent hosting, not as optimized in terms of servers, but yes you can try this out.

HostitBro – Very budget friendly and with good discounts. Just the servers are not very optimized and I would personally only use for very basic website or educational purposes.

Do You Want to Learn WordPress?

I will teach you WordPress from basics to advanced. No matter if you are a freelancer, an agency, a businessmen, an entrepreneur, homemaker, corporate working professional or just a student who wants to build a portfolio.

I have helped many people ranging from all industries all age groups. I provide live training as well as recorded course is also available.To connect with me, just message me and we can discuss your requirements.