Sticky navigation and sticky headers used to be a stylistic detail and many of the today’s top brands use them. You’ll find fixed navigation on Sony, Facebook, Google+, Adidas, Nike, CNN and many other websites and they all look modern. But besides looking stylish, there are many benefits of having them on your website:
- Easier browsing
- Better branding
- More Page Views per visit
- Lower bounce rate
There are also some cons to having fixed navigation on your website, because it introduces more clutter and gives users the ability to navigate away faster, so it’s not good to have it on your landing pages. Many websites don’t need it, but often times implement it just for the sake of being trendy.
If you decide and implement it, consult your Google Analytics data to see whether your sticky header actually improves your key performance metrics. Sticky headers can contribute to web usability & SEO so just check to see if it’s right for your site. Having something so important on your website that doesn’t improve user experience and gets in the way of your website’s aim can be a big issue.
There are many tutorials to help you make fixed navigation yourself. If you don’t want to waste time coding and styling your fixed navigation, you could try installing a WordPress theme that has sticky header built in. Our Total WordPress theme features sticky navigation (which is super customizable by the way), but if your current theme doesn’t support sticky headers, then read on. I’m going to cover best sticky header plugins for WordPress, both free and premium.
When it comes to extending your website functionality, there are multiple choices and they all come in the form of free or premium (paid) plugins. The free options are pretty great, but premium sticky header plugins come with many features you can’t get for free. This includes options that let you control every segment of your header or even replacing it as well as premium support and updates. For something as important as your WordPress header, I believe they’re worth checking out.
Sticky Header Free WordPress Plugin
If you want an easy way of installing and configuring your omni-visible branding and navigation, then Sticky Header is a good choice. It’s a free plugin developed with simplicity in mind.
Once you install and activate it, you’ll need to go to your theme customizer to configure it. There you’ll find options for:
- Your logo
- Selecting your main menu
- Background & text colors
- Setting your maximum sticky header width
- Make visible when scrolled down value in pixels
- Hide if screen narrower than (in case you want to hide it for mobile users)
This plugin doesn’t show submenu items and it’s ideal for small blogging websites. It shouldn’t take you long before you have a working fixed navigation and branding on your website. All features are stacked in theme customizer, so you’ll be able to preview them as you make changes.
Awesome Sticky Header Free WordPress Plugin
Awesome Sticky Header is a much complex free plugin and it enables you to fine tune your sticky navigation.
This free plugin puts you in control of many things, such as:
- Header orientation
- Site description
- Transition effects
- Sticky option
- Submenus, up to 3 levels deep
- Several logo types
- Centered menu position
- Background image URL or background color
- Font sizes and Color options for all header elements
- Search box
- Secondary menu
Once you activate the plugin, it automatically enables sticky header option. You’ll need to go to Appearance > Awesome Sticky Header to configure its looks and functionality. You can also see all the changes you make right away, as this plugin features live preview in your WordPress dashboard.
Awesome Header Premium WordPress Plugin
Awesome Header is a “pro” version of Awesome Sticky Header. What you’ll find interesting here is that not only can it serve as your sticky navigation, but you can replace your entire WordPress header with it.
You just need to replace your exiting header markup with a small function and your WordPress header will be replaced by Awesome Header. From there on, you can tweak anything you can imagine. There’s everything you find in the free version and some:
- Ability to replace your entire WordPress header
- 3 levels of navigation
- 100% responsive
- Better SEO with Breadcrumb Microdata
- WooCommerce & bbPress support for Breadcrumbs
- Unlimited color options
- Background image or pattern
- Secondary menu (3 vertical dots)
- Fixed navigation
- 3 search types (underline, plain search field and slide below header)
- Menu items padding (left/right); also for sticky header
- Menu item background
- Font sizes for all elements
- Transparency for menus and submenus
- Social menu with Genericons make it retina ready
- Navigation labels
If you’re developer and want even more control over your header areas, you can do that as Awesome Header is very extensible using its many Filter & Action Hooks.
Hero Mega Menu Premium WordPress Plugin
This one features a fully flexible & customizable layout, packed with options for just a bout every features of your header.
The Hero Mega Menu is super easy to use, since it utilizes a drag and drop interface to create a custom menu design. And the structure builder works just like normal WordPress menus – simply nest elements to create drop downs, and edit them to create mega menus. It also features:
- Transparency options
- 60 Color presets
- Responsive design
- Map, image, list, post & text support
- Custom backgrounds
- 270 ElegantThemes icons
- Mobile navigation
- Sticky menu (of course!)
And you can do tons more. The plugin also supports custom CSS, includes fixed & full width layout options, shadows & rounded corner options, various animations, Google fonts support and more.
We’ll see more and more sites adopting sticky headers and sticky navigation, but if not done properly, these fixed website elements can be distracting and contribute to poor conversion rates. Sticky navigation can be too large for some screens, so you need to make sure it doesn’t take up too much space on mobile screens.
Your website branding and navigation should contribute to the pleasant feeling of browsing and it should be easily accessible.
Sticky headers should never compete with your content for attention.
Consider experimenting with sticky headers, monitor your traffic, conversions and user behavior using analytic platforms. If configured properly, sticky header WordPress plugins can bring you more returning customers, more satisfied users and ultimately, more conversions.