Sticky Menus and Widgets for WordPress

Sticky Menus and Widgets for WordPress

Sticky areas of a page are sometimes referred to as floating or being fixed. The effect is the same and it results in an element having the appearance of being stuck in place or floating independently from the rest of the site.

As the user scrolls down the page, the sticky element will be fixed in place and continue to remain on display.

A popular use of this effect is to make a navigation menu sticky. This means that as the user scrolls down the page, the menu remains visible. Users can then click on the menu items at any point, rather than having to scroll back to the top of the page.

This makes navigation quicker and easier as the user doesn’t have to do anything to find the menu; it’s already there, on the screen. Using this effect means it just as easy to click through to another part of your site as it would for them to click the back button, which would be their only option otherwise (without scrolling).

The benefit to the site owner is that the bounce rate is decreased while the number of pages viewed per visitor is increased. These are two metrics that are used by Google to help determine the quality of a site for its ranking algorithm, so anything you can do to improve them is a worth investigating.

Sticky-pagelines

Some examples of this practice in use include the PageLines website which uses a sticky horizontal menu and the Web Designer Wall site which makes use of a fixed vertical navigational menu.

To find out how to add this functionality to your site, read our round up of some of the best sticky menu and page element plugins available for WordPress:

Q2W3 Fixed Widget (Sticky Widget)

This is a free plugin that enables you to turn one or more of your sidebar widgets into floating widgets. Once enabled, your widgets will have a new option which allows you to set them as floaters or sticky widgets.

Sticky-widget

This means that as your readers scroll down the page, the enabled widgets will remain visible on the screen.

If you choose widget in a high up position on the sidebar to be sticky, as you scroll down the page, that widget will cover up the widgets lower down the page. While this isn’t a problem, it can look a bit messy and perhaps confusing to readers not used to seeing such an effect. For best results I found that making the bottommost widget sticky avoided this issue.

Overall, this a good effect to use if you want to keep a particular widget on display at all times. Making a widget that contains a sign up form for a newsletter is a good candidate for this plugin as it should help increase opt ins to your mailing list.

Download this plugin

WP Sticky Menu Plugin

The WP Sticky Menu Plugin is a $15 premium plugin from Code Canyon. The plugin allows you to add a sticky horizontal menu to your site.  The menu you create will always be visible to your readers as they scroll up and down the page.

Sticky-WP-Sticky

When it comes to the position of this layout it can be deployed at the top or bottom of your pages for maximum visibility. The menus also support multiple levels, which are displayed using drop down listings. The dropdown sub menus can be multicolumn allowing you to fit in a large number of links, divided up into different categories. You can even add text fields to your menus making them ideal for displaying information as well as links.

WP Sticky also comes with 20 styles for editing the appearance, making it ideal for fitting in with the current design of your site and the theme in use.

For a true sense of what this impressive plugin can do view the demo here.

Download this plugin

Nmedia Sticky Header/Footer Plugin

This is a free plugin that allows you to create a sticky notice at the top or bottom of your WordPress site.

Sticky-Nmedia

The settings are pretty simple to get to grips with but there is no option to insert a menu into the sticky area. However, you can insert HTML so you are able to put a link in this area.

You can customise the width, font and colours used for the banner, but unfortunately there is no way to make it full width, you must enter a pixel value. Although you could enter a value higher than the width of your site, to fill the whole width of the screen.

Other drawbacks are that you can’t change the height of the area or align the text. This means the end effect isn’t as impressive as you might’ve hoped when installing the plugin.

Sticky-Nmedia-02

Download this plugin

GC Message Bar

The GC Message Bar is a free plugin that adds a sticky message bar to the top or bottom of your page, much like the above plugin, but in a much more sophisticated way.

Sticky-GC-01

The plugin works in a similar way to the Hello Bar service and adds a notification bar which can contain text or a link or a combination of both.

The GC Message Bar plugin features a surprisingly large number of options and settings giving you an impressive amount of control over how your floating notification will look to your visitors.

Sticky-GC

The end result is great and I was impressed with the customisation options for this especially as it’s a free plugin.

Sticky-GC-02

Like the Hello Bar service this plugin is strikingly similar to, it also has bwhich can be activated and accessed via the My Get Conversion website.

My only slight complaint would be that the admin area for the plugin, inside your dashboard, doesn’t really resemble the WordPress admin interface and looks like it’s been tacked onto your site from another system. However, considering the features and freeness of this plugin I can overlook that this time.

Download this plugin

Sticky Notification Bar

Another free option here for creating a sticky or floating area on your WordPress site. This one inserts a horizontal bar into the top of your page which only appears once the reader has begun to scroll down the page, and then it stays visible until they return to the top of the page.

Sticky-Notification-01

While this might sound a little strange it does work pretty well. The notification bar can be used to display text or one of your WordPress menus, making it a great navigational aid. You can also upload an image to the bar for extra branding.

Sticky-Notification-02

You can also add social buttons for the most popular networks, giving this plugin the added functionality of a floating social share bar.

Sticky-Notification-03

While it doesn’t have as many options for customising the appearance as the GC message Bar plugin, being able to display a WordPress menu into the bar is a great idea.  It will be down to you to decide which is more important to you: displaying a menu or more control over the appearance.

Download this plugin

Stripe Lightweight Menu

This is a $10 premium option from Code Canyon for adding a sticky menu to your site.

Sticky-Stripe-01

The menu that is inserted into the header of your WordPress site is visible at all times as your readers scroll down the page. By using the stripe menu to display a few important links, you can help make navigating your site easier for your readers, once the traditional menu is no longer visible, as they move down the page.

Sticky-Stripe-02

The appearance of the menu bar is nice and subtle but it also has some great animation effects once users begin to interact with it.

When building your menu bar, you can choose from over 350 icons and you are able to select from a range of colours. As it’s a two level menu, dropdowns are supported.

Download this plugin

Mash Menu – Easy Mega Menu Plugin

This is another premium option available at Code Canyon which adds a fixed horizontal menu to your site.

Sticky-Mash-01

Unlike the above Stripe plugin, this option isn’t lightweight and has lots of functionality. Some of this might be overkill for the average user, in which case, Stripe is probably a better option.

Sticky-Mash-02

However, if you want more bang for your buck then this could be a good choice. The menu dropdowns can display featured images from posts allowing you to create rich menus to other pages on your site. You can of course also change the colour scheme in use and there is room for social icons and links on your menu.

It is also possible to drag widgets into the second level of the menu for displaying pretty much anything you want that would otherwise go into your sidebar via a widget.

Sticky-Mash-03

Download this plugin

Conclusion

While some sticky items can have the potential to confuse and distract your visitors, a carefully used and subtly designed fixed menu bar can provide a useful service.

Making it easy for your readers to jump to another part of your site or click a social button no matter where they are on your site can really help with keeping users on your site and preventing them from getting lost.

With so many options to choose from, both free and premium, it’s a good idea to think about what you want to achieve first, then select a plugin rather than installing one that looks good but doesn’t have the right functional match for your goals.