Looking to have a sticky header for your WordPress website? It’s not that difficult to do this. In this post, we will walk you through the steps on how to add a sticky header to your WordPress website.
Having a sticky header is growing as a popular trend with most websites. A sticky header makes a part of your WordPress area i.e. the header (which carries the logo and site title) and primary navigation will always be visible even if the visitor scrolls down your blog post.
A sticky header helps the user to easily navigate your website. It can also improve the visibility of the brand as your logo always remains in view as your user is scrolling through your website content.
Now many themes like Generatepress do give you an option to make your header sticky as a part of the theme. However, if you are using a theme that does not have a built-in option to make the header stick, worry not. There are some easy solutions.
How to add a sticky header to WordPress? You can create a sticky header on your website using either CSS or a plugin
I tested a few plugins to see which one helps you make the sticky header. I really liked the plugins “Sticky Menu (or Anything!) on Scroll”.
You can also use the plugin- mystickymenu, which is also quite popular. Both the plugins are easy to use and do the job.
How to Add Sticky Header to WordPress using Plugin
You can follow the steps below to add a sticky header to your WordPress website:
- Click on plugins-> Add New Plugin- > Search for the Plugin: “Sticky Menu (or Anything!) on Scroll” by WebFactory Ltd. This is a very popular plugin that has 100,000+ active installations and awesome 5-star reviews.
- Activate the plugin
- Go to the Plugin settings – > Basic Settings Page – > Fill in the name of the Sticky Element which is simply “
#site-header” for most themes including Twenty-Twenty Theme by the WordPress Team (more on this in the details)
Some more important information on using this plugin
While using this plugin is a breeze, some bloggers may face difficulty in making this plugin work. Now, this confusion is mainly on what to fill in the field “Sticky Element”.
Now, what is an element? In the crudest sense, an element is a part of the webpage. In our case, the target element which we want to make sticky is the Header.
But in this plugin, it has to be identified or called out either by its Class name or its ID.
So when we want to make the Primary navigation or Site Header sticky, we need to use either its Class or ID. This is the name that needs to be entered into the field “Sticky Element”.
Now the problem arises if you don’t what is the technical name i.e. Class or ID of the header as applicable for your theme. For most themes including the Twenty Twenty provided by WordPress, the header ID that can be entered in Sticky Element Field is #site-header.
Now if this does not work for you, probably your theme has a different class or ID for its header. You can identify the name simply by right-clicking on your site header and click “Inspect” which will open the elements tab. Here, search for the element header id and see what it is equal to.
Another thing to note that when filling the Site Element field is that if you use the class name, it has to be preceded by a dot (e.g. “.main-menu”).
If you identify the element using its ID (e.g. site-header above), then it has to be preceded by a pound/hash/number sign (e.g. “#main-menu”).
Important: Make sure there is only ONE element on the page with the selector you’re using. If there is none or more than one element that matches your selector, nothing will happen.
After following through the steps, make sure you check if the sticky header is working properly on both mobile and your laptop.
The Sticky Menu (Or Anything) On Scroll plugin for WordPress is a great plugin that can not only make the header sticky but also make other elements such as a sidebar, a logo, etc. on your pages “sticky” when you scroll down.
However, the limitation of this plugin is that it can be used to make only ONE element sticky at present. They do intend to offer the option to make more than one element sticky in a later update.
Sometimes a simple selector like “
.menu-main-menu-1” is enough. Other times you will have to be more detailed and use a more specific selector such as “header > ul:first-child” or “nav.top .menu-header ul.main”.
How to make the Sticky Header Transparent (Sticky Header CSS)
After adding a header, you may also want to make it transparent for a more appealing effect. So how to do this?
You can also make the sticky header transparent by using a simple CSS.
- Step 1– Add a New Plugin– “Simple CSS” by Tom Usborne. This is an awesome plugin whose author is also the creator of the highly popular Generate Press Theme (PS: We use the same theme on our website)
- Step 2– In the WordPress Dashboard, click on “Appearance” ( the one with the paintbrush symbol)
- Step 3– You will see an option “Simple CSS”. Click on it and a black screen appears. You simply need to Paste the CSS below on the black screen and click on the button “Save CSS”. That’s it. As simple as that.
If you are using the plugin mystickymenu, it gives you the option to control the opacity of the header.
How to make the header sticky if you are using Generatepress Theme
The Generatepress theme has a built-in option to make the header sticky. For this, go to the following path-
Customizer > Layout > Sticky Navigation.