How to Create Sticky Navigation for WordPress

[ad_1]

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.

We use sticky navigation on our own website to help users quickly access other parts of our website.
We use sticky navigation on our own website to help users quickly access other parts of our website.

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:

User Experience

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.

Branding

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.

Subtle sticky header options at Medium.
Subtle scroll-triggered sticky header options at Medium.

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.

Sticky header in action on the full-width Oasis site.
Sticky header in action on the full-width Oasis site.

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.

Mobile version of Oasis sticky header.
The Oasis site on mobile.

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.

Sticky header in action on the Gareth emery site.
Sticky header in action on the Gareth Emery site.

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.

Fixed side navigation on the Squid Compression site.
Fixed side navigation on the Squid Compression site.

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

  • 2. Sticky Menu (or Anything!) on Scroll

    sticky-menu-on-scroll

    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.

    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.

  • 3. myStickymenu

    my-sticky-menu

    The myStickymenu plugin was originally designed to work with WordPress’ Twenty Thirteen theme but should also play nicely with most modern, responsive themes.

    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.

  • 4. WordPress Notification Bar

    wordpress-notification-bar

    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.

  • 5. WPFront Notification Bar

    wpfront-notification

    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 developers have put together a simple ideas page with sample use cases to inspire you, and a more detailed guide to the full range of settings is also available.

  • 6. Hero Menu – Responsive WordPress Mega Menu Plugin

    hero-menu

    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.

    Full documentation and support is also available from the developer’s site. If you’re looking for an all-in-one menu and sticky header solution, this plugin has a lot going for it at the price point.

  • 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.

    A propos de L'auteur

    Nassim Maalej

    Je suis un"Geek"avant tout ! Au départ, c'est pour réaliser des projets personnels que je me suis intéressé aux langages de programmation et aux usages d'Internet après 3 ans d’expérience derrière moi consacrée à des clients très différents. Je suis à même de développer des applications Web complexes et optimisées. J'ai travaillé principalement sous WordPress, ma spécialité depuis 2011, et développe moi-même de nombreux plugins, thèmes ou API en PHP . J'ai un expérience en management projet web l'analyse les besoins , rédaction le cahier des charges en accord avec le client , coordonnassions le travail de l’équipe – graphistes, développeurs, rédacteurs, spécialistes e-commerce, etc...

    Laisser un commentaire

    Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *