How to Make a Sticky Header in WordPress
Before going into how we can create a sticky header in WordPress, let us first understand what they are and why we may want to use them. Sticky elements, or fixed elements, are special kinds of elements that always remain visible and don’t change their position when the user is scrolling up or down. These elements can be accessed at any time due to their positioning and are therefore very useful for menus or other navigation options.
You want to give your users as many convenient options as you can, to make your content easily accessible and to reduce user frustration. Using the sticky elements, the users can quickly switch from one page of your website to the next and find exactly what they need. All of this comfort and ease of use means that your user experience will be much better, and you will have higher user retention.
WP Sticky
Now, we will tackle one of the main types of sticky elements, the sticky header, and an awesome tool that can help us easily create and customize these elements. The tool in question is called WP Sticky.
There are many different ways of creating sticky headers besides WP Sticky. You can even create these sticky elements using pure HTML and CSS code, but that takes some technical knowledge and is a time-consuming process. This plugin is a much simpler solution to the problem and is extremely beginner-friendly.
Before we can start using WP Sticky, we must first download it and install the plugin. As this is a very straightforward process, we won’t be wasting any time on it. Instead, let’s jump straight into creating our very first sticky header.
The first thing we need to do is to enter the plugins section in our WordPress Admin panel; from there, select WP Sticky Pro and then click on Settings.
We will be greeted with these options where we will need to select Add New Sticky Element.
After that is done, we will see a new entry under the Your Sticky Elements tab called Sticky Element #1. Congratulations, you have created your first sticky element, but there is a lot more to do before we have a functional sticky header. As you can see, there are few different settings categories for our sticky element.
Let’s check them out in more detail.
Basic
This is where we will name our element and choose what exactly we want to make sticky.
Firstly, we need to give our sticky element a name; in this case, it will be Sticky Header.
Next, we need to locate and select an element we want to make sticky. There are two ways we can achieve this.
Visual Picker
This is the more convenient and easier option. Just go into the Basic section and select the Pick Element option.
Once you do that, your website will open together with the WP Sticky menu at the top, signaling that you have entered the visual picker. If you hover your pointer over some of the elements, you will notice a yellowish broken line rectangle, visualizing the area you have selected. Click on it with the left click, to select it.
This will take you back to the WP Sticky settings page, where you will see the unique identifier of the selected element. In our case, it looks something like this.
Afterward, click the Save Changes button in the top right corner, and we are done.
Writing the Unique Identifier
If you prefer and are familiar with the unique ID of the element you want to make sticky, instead of visually picking it, you can simply write down its unique ID.
Visual Options
After we are done naming and selecting our element, it’s time to make it a header and customize it. WP Sticky gives us quite a lot of options to do so.
Position
As we want to make a header, we are going to leave this option in its default state, which is Top. In case you change your mind or the requirements change, you can also select the Bottom option.
Space Between the Top of the Page and Sticky Element
Sometimes, our sticky elements can get too close to the top of the page. We can correct this manually by typing in the number of pixels between the top of the page and our designated sticky element.
By default, this option is not set as most of the elements will be correctly placed automatically.
Check for Admin Toolbar
If your website has a specialized Admin Toolbar, it might obstruct your sticky header. If that is the case, all you need to do is check this option, and the issue will be resolved. WP Sticky will automatically recognize the size of the toolbar and react accordingly.
Devices
Sometimes you want to have different behaviors depending on the device your visitors are using to view your website. You might not want to have a sticky header on mobile devices. WP Sticky gives you the option to select what device categories will have the sticky behavior. In our case, we will opt out of small and medium devices.
Z-index
Another case that might require some manual customization is if there are elements that appear over your sticky header. To prevent this from happening, you will need to increase the Z-index of your sticky header.
If you are unsure about the Z-index values of the elements that are overlapping with your header, type in the maximum value, 99999, and this will fix the issue.
Effects
There are two effect settings you can use. Fade in and slide down. Now, which one you will end up using depends fully on your personal preference and the desired look of the website. Experiment until you make up your mind.
Opacity
Another visual customization of the sticky element. Depending on the rest of the website, using the slider, we can make the sticky element more or less transparent.
Scroll Range
What happens if you don’t want certain parts of your website to have the sticky header? Well, this slider allows you to customize the starting point and the ending point where your sticky header will be displayed on your website as you keep scrolling.
Background Color
What if our sticky element isn’t so clearly visible? The plugin comes with the option to make it stand out by giving it a background color. To do this, click on the button shown below and pick the desired background color. It’s that easy.
Custom CSS
If you desire to make even more changes to your sticky element that are not covered by the above-mentioned options, there is a field where you can add customization through CSS. One important thing to bear in mind, in this case, is that there is no need to wrap styles in selectors. You don’t need to write .classname{color:#FFF;}, instead all you need to write is color:#FFF;
We’ll leave this empty as there is no further need to customize our sticky demo header.
After changing all of the desired settings, don’t forget to save the changes. Having done this, we can go ahead and click the Preview Sticky button in the top right corner to preview the changes we’ve made so far.
In Conclusion
WP Sticky is an excellent addition to any website, and it makes the developer’s job much easier. So simple to use, yet offering sach detailed and deep customization options, this plugin is guaranteed to help you make the perfect sticky header for your website. This is great news since a sticky header can significantly increase website conversions.
WP Sticky has a Pro version, which includes all of the aforementioned options and costs $5,99 per month or $39 for a lifetime license. Several different pricing plans are also offered for teams and agencies.
Vallery Henings
Vallery Henings is a copywriter and content writer who specializes in ghost blogging, email marketing campaigns, and sales pages. She is also a lover of road trips, peanut butter cookies, and a dog name Mimy.
We hope this article was helpful. If you liked it, feel free to check out some of these articles as well!
