How To Implement a Sticky Header In WordPress
Have you noticed the menu bar that doesn’t move when you scroll up and down a site? That is a Sticky header. It is one of the most popular design trends that many web designers make use of today to improve user experience on their websites. If you would like to implement a sticky header in WordPress but don’t know how to, here is an article for you.
You will learn what the Sticky header is and how we can create one in WordPress. Here is a video guide showing how to add a sticky menu in WordPress. But if you prefer text-based tutorials, then continue reading this post.
Contents:
- What is a sticky header?
- Pros and Cons of Sticky Headers
- How to create a sticky header in WordPress
- Conclusion
What Is a Sticky Header?
Sticky header or Sticky navigation bar simply refers to the top navigation menu that remains visible on the screen while users scroll up and down the site.
This navigation tool makes it easy for you or anyone visiting your site to quickly access the menu bar without having to scroll back to the top of the page.
Now that you know what a Sticky header is, how can you create it on your WordPress site? Let’s find out the different ways of doing this.
Side Note: Themes like Asta Pro and GeneratePress come with built-in sticky headers. Using any of these themes will save you the stress of creating one.
Pros and Cons of Sticky Headers
Pros
Smooth navigation means a lot to every website owner. This is why sticky headers are in vogue. They let site visitors move around a site effortlessly. Also, since the menu bar remains in permanent view, they do not have to scroll back each time they need to select an option. This is useful if your page contains lots of content.
Another advantage of the sticker header is that it is time-saving. Modern web developers use it so users can quickly jump to different sections of a site. No unnecessary scrolling.
Also, having a sticky header bar helps you build your brand. How? Your menu bar most likely has your company name and logo. So, putting your sticky logo and company name in front of visitors has a way of registering your brand in their minds.
Cons
One of the common disadvantages of sticky header bars is that it tends to take up some space on the screen. Above all, it cuts out any beautiful background image that you have on the site. This can be solved by having the bar shrink once you have scrolled past.
Another con is that it isn’t always effective on mobile and tablet devices as it can be hard to translate into a mobile format. Additionally, if the design is complicated, it may negatively affect your sites’ performance.
How To Implement a Sticky Header in WordPress
There are two ways you can achieve this in WordPress. Manually writing the CSS code or using a WordPress plugin. We will show you how to implement both.
Implement Sticky Header in WordPress Using Plugins
Visit your website. Try scrolling down. See that menu bar that just disappeared? That’s what we want to fix.
One way you can create a sticky header is by making use of a sticky header plugin. This is actually the easiest way to create a sticky header.
To get started, log in to your WordPress admin panel, and go to Plugins >> Add new. Then, search for ‘Sticky Header’. After that, click Install Now next to the ‘Sticky Menu & Sticky Header‘ plugin.
After installing, activate the plugin. Once this is done, go back to your site’s frontend and right-click on the header. Click on Inspect to open Chrome dev tool. As a result, you’ll have your site’s HTML and CSS layout on your screen.
Side Note: You’ll get the best result with Google Chrome browser.
On the ‘Elements’ tab which has the HTML markups, click on the ‘header id=“site header”’ element, then on the ‘Styles’ tab which has the CSS styling, click ‘#site header’ option.
Copy the ‘#site-header’ option and click the X icon at the right corner of the tab to exit the Google inspect tool. Note that the header id parameter may vary depending on the theme you are using.
Configuring Sticky Menu & Sticky Header Plugin
After copying the header id, head back to your WordPress dashboard and then go to Settings >> Sticky Menu (or Anything!)’ to open the plugins’ settings page.
In the “Basic settings” tab, paste the CSS ID you just copied (from Google Inspect) in the ‘Sticky Element’ input field. After that, click on the Save Changes button to register your changes.
Now, go back to your site’s frontend, scroll from top to the bottom of your website, and you’ll notice your site’s header now has its position fixed.
Sidenote: There are other sticky header WordPress plugins such as myStickymenu, Mega Menu, Awesome header, Hero Menu, etc that provide similar features.
How To Implement a Sticky Header in WordPress Using Additional CSS
Aside from using a plugin, you can create an on-scroll fixed header and navigation bar by adding a custom CSS code on your WP site. Yes, coding is involved, but don’t panic.
It is quite easy to do and does not require that much work. However, if you are not comfortable working with codes, stick with the ‘plugin’ method we described above.
To get started using this method, log into your WordPress dashboard and then go to Appearance >> Customize to open the customizer menu.
Here we will use the additional CSS option to add the custom code. Recall we used Google dev tool to get the ID of the header element. We will be using the same ID for the CSS method.
On the customization page, go down to ‘Additional CSS’ and click on it. Once it opens, paste the code below into the text box.
#site-header {
position: sticky;
top: 0;
}Replace “#site-header” with the id of your header element. After adding the code, click on the Publish button to save your changes.
You can scroll down the preview page to see the sticky menu in action on your site.
Conclusion
Now that you have learned how to implement a sticky header in WordPress, do you think it is necessary for your site?
Well, there isn’t a yes or a no to this question as it all depends on your preference. But, if there is almost no scrolling to be done on the website, then there’s no need for it.
Additionally, before using a sticky header, it would be best to get feedback from your users to know if the feature would be useful to them. And if you need to use it, make sure that it works on all devices. If you want to add more styles to your website, then you should consider adding a parallax effect to your background images.
More Resources:
