How to Create Sticky Navigation for WordPress
How to Create Sticky Navigation for WordPress
In a scroll-dominated landscape, sticky headers are a helpful courtesy to users, ensuring your navigation is always visible and easily accessible.
We built sticky regions into Upfront so you can create sticky navigation and place it at the top or bottom of your site. If you haven’t played around with our Upfront demos yet, check it out – creating sticky headers only takes a second!
But if you’re not using an Upfront theme, the easiest way to add sticky navigation is with a plugin. So in today’s post we’ll look at the pros and cons of adding this kind of feature to your site and some fantastic plugins to help you get there.
The Pros and Cons of Sticky Headers
Sticky headers have become increasingly popular in recent years, but their use isn’t simply the result of a passing design fad. Speedy access to site navigation is becoming more important than ever in the context of a proliferation of smaller devices and infinite scrolling on websites.
That said, not everyone is a fan of sticky headers and there are decent arguments both for and against their use.
Let’s start with the positives:
This is the screamingly obvious one – instant access to a site’s main sections makes navigation faster and means users always have an option, no matter how deep into a particular bit of content they might happen to be. In the context of mobile, this is even more crucial.
With a tastefully positioned and appropriately sized version of your logo included in the header, you’re keeping a core part of your site’s branding front and center at all times. Obviously this isn’t something you want to go to town on, but it will stick with users over time and boost brand awareness.
Better Analytics Metrics
As a consequence of having easier to manage navigation, you’re likely to see a lowering of your bounce rate and an increase in page views per visit. This is by no means guaranteed, of course, but it’s certainly worked in the context of my own sites.
But every rose has its thorn, and when it comes to sticky headers, the main risk is simply that you mess up the implementation somehow. The most obvious way of doing this is by making your header far too large or obtrusive for smaller screens.
Getting this right is simply a matter of experimentation and field testing using a combination of real devices and tools. Google’s device mode and mobile emulation, browser plugins, and in-tool preview options in your design package of choice are all excellent ways of ensuring everything will be shipshape for users.
The appearance of your sticky header can also be intelligently handled in response to actual user actions to keep obtrusiveness to a minimum. Medium’s current implementation of this is a nice example – search, sign up and navigation options disappear entirely as you scroll down the page, but fade tastefully back in as you scroll up to give you instant options at a time when you are likely to be looking for them. It’s a small touch, but a delightfully considered one in terms of overall usability.
The second major risk is that you somehow totally botch the implementation on the technical side of things and end up with some sort of Frankenheader that completely obscures content or is otherwise needlessly buggy and irritating. My selection of six plugins below is designed to help you avoid this pitfall in particular by removing the need for custom coding entirely.
Before we get on to our WordPress plugins, though, let’s have a quick look at some examples in the wild highlighting common implementation patterns.
High-Profile Sites with Sticky Navigation
As the Medium example above indicated, there is more than one way to skin the sticky header cat.
The Oasis website is a solid example of standard fixed top navigation in action. Scroll away to your heart’s content on any screen size and you’ll never be more than a click or tap away from the core content you’re after as a fan.
View the site on a desktop browser and you’ll see the full range of menu options laid out for you. Resize the browser or switch to a mobile device and you’ll see options cleverly cut to the bare essentials with a hamburger menu to handle core navigation via a horizontal reveal.
The Gareth Emery site shows a subtle variation on this with the header dimensions animating to a smaller size as you scroll down to take up less space and allowing for transparency underneath.
Switch to a mobile view of the site and you have another excellent example of how sticky headers aid branding – user options are cut down to the site logo and a hamburger menu.
One of the defining features of the early web, primary side navigation can also lend itself to a sticky approach, though you’ll come across it less often online these days. The Squid Compression website is a solid example of this approach in action on desktop, and reverts to a top navigation with a hamburger menu when displaying at smaller sizes.
Now that we’ve considered the merits of sticky headers generally and looked at a few real world examples, let’s move on to tools for making it all happen on your own WordPress sites.
Sticky Header Plugins for WordPress
The Sticky Header by ThematoSoup plugin is a straightforward option for site owners looking to add sticky header functionality to their online offerings.
It presents you with a pared down but sensible set of options for deploying, most of which are available via the Customizer. You’re limited to one level of navigation with this plugin and have simple settings to control background color, text color and the maximum width of the header.
Further settings are also available to set a distance from the top of the page that the header should be visible after. If you’re concerned about screen real estate on smaller sizes, you’ve also got the option of hiding the header entirely beneath a configurable screen width.
The Sticky Menu (or Anything!) on Scroll plugin is not a name that trips off the tongue, but you can’t fault it for the accuracy of its description.
1.6 million WordPress Superheroes read and trust our blog. Join them and get daily posts delivered to your inbox - free!
This plugin gives you a little more leeway in what can be made sticky by enabling you to make any element with a unique name, class or ID stick to the top of the page. This opens the door for creative uses with banners and calls to action in addition to menu headers, but you’ll obviously want to be careful to not unnecessarily ruin the user experience with your implementation.
You’ll also need a little bit of HTML/CSS experience to actually deploy, as you’ll be responsible for correctly targeting the selector on the page that you’re after. This should be a relatively trivial thing to get right in most cases, though.
You have options for controlling positioning from the top of the screen and can choose to enable for certain screen sizes only if you’re worried about appearance on smaller devices.
There are also settings for specifying the Z-index of your sticky element to ensure it’s always visible, and a handy debug mode makes use of the browser’s console to show error messages when debugging.
The plugin is fully prepared for localization, responsive out of the box, and also includes simple options for adding custom CSS code to tweak its appearance.
The plugin authors have also put together a handy demo page where you can see it in action before deciding whether to download. With over 10,000 active installs and a solid five-star rating, it’s obviously getting the job done for a significant amount of site owners.
The options we’ve covered so far are primarily aimed at providing navigation options in a sticky header, but sometimes all you need up there is a simple notification or call to action button. Classic use cases would include highlighting special offers on a site or encouraging users to sign up for a newsletter.
The WordPress Notification Bar from SeedProd (makers of a popular premium site launch plugin) is the tool to turn to if that’s all you’re after. It’s a snap to set up, includes simple settings for customizing colors, and is translation-ready (eight translations are currently available) and compatible with Multisite installations.
The WPFront Notification Bar is also, as the name suggests, very much targeted at notification rather than navigation.
The options available with this plugin are slightly more advanced than our previous offering and you’ve got much more room for tweaking.
You’re free to customize the height, choose whether to display on scroll, stick the header to the top or bottom of the screen, and have full control over color customization.
You can also set start and end dates for the header’s appearance (a handy feature in the context of time-sensitive promotions) and limit its appearance to specific posts, pages and user roles.
The Hero Menu – Responsive WordPress Mega Menu plugin is the only premium plugin on our list and is available for $19.
It enables users to create all kinds of menus in minutes, from feature-rich mega menus down to the simplest drop-down options.
The Hero Menu plugin is fully compatible with WooCommerce and has been thoroughly tested with a variety of leading premium WordPress themes such as Enfold, Avada, and Divi – along with all recent versions of WordPress default themes from Twenty Eleven up to Twenty Fifteen. Full details of setup with these popular themes is included in the plugin’s integration guide.
On the sticky header side of things, a simple click in the plugin settings is all you need to enable fixed navigation and you have the option of separate settings for color, transparency and logo if you want to make a sticky header distinct from your main menu.
Adding Sticky Navigation to Your Website
Whether it’s a question of putting your most prominent call to action front and center or ensuring your site users always have an appropriate navigational option in front of them, sticky headers make an awful lot of sense from both a site owner and user’s point of view.
The plugins I’ve highlighted should cover you for most use cases but, obviously, new options are emerging every week. If you’ve got a favorite sticky navigation tool let us know in the comments below.