CSS Code to Make a Sticky Header in WordPress

by

CSS Code to Make a Sticky Header in WordPress. Some WordPress themes already have this as a built-in feature. You can take the GeneratePress theme as an example. I am using the GeneratePress theme, and it has a sticky header option. For now, I am not turning it on, since I am not used to having a sticky header. If you want to have a sticky header on your WordPress blog, then this article is for you.

There are various ways to make a sticky header on a WordPress site. In this article, I will help you create a sticky header using CSS code. It is a simple and easy process. You just need to follow the steps below properly.

Benefits of Having a Sticky Header

With a sticky header, you can make your blog look stylish, similar to how you can create stylish headings in WordPress. Doing so will keep your header visible even when your visitors scroll through the blog. It can be used to highlight your header or menu.

CSS Code to Make a Sticky Header in WordPress

CSS Code to Make a Sticky Header in WordPress

 

As I mentioned above, some themes already have this built-in feature. Before you upload this CSS code to your blog, make sure to check your theme’s features properly. If your theme already has this feature, you can easily turn it on. For those who don’t have the sticky header option, just copy the given CSS code.

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  background-color: gray;
}

Note: Do not make any changes to the code. Doing so can make it unstable. This doesn’t mean you can’t remove it from your blog. If you don’t like the outcome, you can easily remove the CSS code.

How to Upload CSS Code in a WordPress Blog

There are two simple ways to upload CSS code to your blog: with or without a plugin. The choice is yours. Let’s discuss each method in detail.

Without Plugin

This method is for those who do not want to use a plugin. It is fairly simple. The only drawback of this method is that you have to add the CSS code every time you change your site’s theme. To upload CSS code to your blog, simply follow the steps below:

  1. Go to your blog.
  2. Click on Settings > Customize.
  3. After clicking on it, it will take you to the theme settings page.
  4. At the bottom, look for the Additional CSS option.
  5. Paste the CSS code in the empty field.
  6. Once you are done, hit Save.

Check your WordPress site for the sticky header. If the sticky header is working fine, leave it untouched. Otherwise, remove all the CSS code from the Additional CSS field.

With Plugin

You can also upload CSS code to your WordPress site using a plugin. There are many free plugins available in the library. Among them, I prefer the Simple CSS and JS plugin. With this plugin, you can add numerous CSS and JS codes to your blog. This method can be used if your Additional CSS field is already occupied. To upload CSS code using a plugin, follow the steps below:

  1. Go to Plugins > Add New Plugin.
  2. Search for the Simple CSS and JS plugin.
  3. Install and activate it.
  4. Go to the Simple CSS and JS page and create a new CSS page.
  5. Paste the CSS code there and publish it.

After completing the process, you can now check your blog. As I already mentioned, you can remove the code if you don’t like the outcome. To remove the code, simply delete the created page. That’s it!

Final Words on CSS Code to Make a Sticky Header in WordPress

In conclusion, you can also use a sticky header plugin to make your header sticky. For Elementor page builder, there is a sticky header add-on. Out of dozens of plugins, pick the one that is most suitable for you.

That’s all for today. If you need any help, do not hesitate to contact me. I will try my best to reply to you as soon as possible. Till then, have a good day. Happy blogging!

Leave a Comment