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 adding a sticky header plugin to your WordPress 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 plugin 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 plugin options 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 typically a premium sticky header plugin will 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.
1. Sticky Menu (or Anything) on Scroll
Sticky Menu (or Anything) on Scroll is your answer if you want to make any element on your web page sticky. The plugin is usually used to fix the menu on the top of the page, but you can just as well use it to make a sticky header too.
Though it works quite well in most situations, it’s not a straightforward solution as it needs you to use a little bit of coding. But if you’re one of those who doesn’t mind dealing with some CSS, read on. Features include:
- Make any element on your page sticky as soon as it hits the top
- The element needs to have a unique name, class or id
- Option to add space between sticky header and top of the page
- Specify minimum and maximum screen sizes for the sticky feature
- Does not affect the Admin Toolbar on top of the page
One drawback, however, is that in some cases the header does not resize to suit the browser size. On the other hand, it allows you to turn on some styling to the elements only when they are sticky.
Using this plugin, you can make other elements sticky too – call to action boxes, logos, or even promotional banners. But as it requires users to manually pick the right selector for the page element to be fixed, it may not be everyone’s favorite. Also, this plugin works to make only one element sticky at a time.
2. Mega Main Menu (Premium)
The Mega Main Menu is one of the top menu plugins on the market. Not only does it offer options for mega menus, drop-downs, mobile optimization, translation support and tons of customizations but it also includes a super helpful sticky option.
Once you install and activate the plugin just use the easy options under Appearance > Mega Main Menu to configure it. There you’ll find options for:
- Enabling a sticky menu
- Define sticky scroll offset
- Custom fonts, colors & icons
- RTL & translation ready
- Hide/Show items on scroll
- Easy to use shortcodes & widgets
The options in this sticky header plugin are all easy to use so it shouldn’t be too long before you have a working fixed navigation and branding on your website.
3. Simple Sticky Header
Add a simple sticky header to any WordPress theme with the free Simple Sticky Header on Scroll. This sticky header plugin offers a quick setup with easy options for your logo, colors, a “next post button,” drop-downs and more. This free plugin puts you in control of many things, such as:
- Custom logo
- Built-in color options
- “Next Post” link option
- Drop-down on mobile
- Custom scroll distance menu visibility
- WordPress live Customizer integration
That last feature is super helpful, as you can preview you sticky header edits live as you make them. Then just publish your changes to quickly update your website.
4. Awesome Header (Premium)
Awesome Header is a “pro” sticky header plugin. 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.
5. Hero Mega Menu (Premium)
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.
myStickymenu is a lean plugin that simply does what it sets out to do – adding a sticky feature to an element on your webpages. It’s responsive and supports multiple languages. The main features include:
- Flexible and customizable
- You’ll be able to add custom CSS code to style your fixed header
- Can set values for fixing header depending on how far down the user scrolls
- Header can be full width or any limit you specify
myStickymenu is simple, and mostly works out of the box. While it’s designed with the Twenty Thirteen theme in mind, it works well for most other themes, though it may take some amount of customs CSS to style the header in a way you want.
7. QuadMenu (Premium)
QuadMenu is an easy to use custom menu builder with a drag & drop interface. You can use the built-in elements for a mega menu layout, icons, social links, shopping cart, widgets and more to create the perfect menu for your website. Plus the plugin includes a sticky menu on scroll option, making the navigation even easier for your readers to use. Other awesome features include:
- Drag & drop menu builder
- Custom logo
- Unlimited menu style themes
- Horizontal or vertical layout
- Sticky on scroll
- Mega menu supported
- Custom fonts
- Visual Composer compatible
Another unique feature that sets QuadMenu apart from others is the developer capabilities. It’s a great option for theme devs or freelancers working on custom client sites since there are built-in features for .less files, custom options, filters, styles and more.
8. Fixed and Sticky Header
Fixed and Sticky Header does a good job of making your header or menu fixed, and making it visible on your website at all times. You’ll need to specify the id or class of the header in the plugin settings. You can also:
- Choose the background color of the header
- Choose text color for the header
- Set the scroll distance at which the header is to turn sticky
9. Sticky Header on Scroll (Premium)
Sticky header on Scroll for WordPress is a no fuss plugin for adding a sticky header that offers a ton of customization options. Installation is easy and you’ll have a sticky header in no time at all. It’s peppered with helpful options that include:
- Point and click customization to blend the header with any theme
- Smoothly responsive, adjusting to any screen size
- Includes an alternative Slim design
- Includes custom button label for dropdown menu, optionally hide menu
- Upload logo image or display text, optionally hide logo
- Use it to display post title or share buttons or next post on blog posts
- Turn off stickiness on mobiles, if you wish
- Live customizer integration to help you preview changes
Aside from that, this lightweight plugin can also hide the header of your existing theme. Besides you can fix the scroll distance at which the header is to turn sticky and change colors, background color, background image, opacity and more. All-in-all comprehensive solution to add a sticky faeture to your header.
10. Site Content Navigator (Premium)
If you create a lot of landing pages or long content (such as in depth guides or studies) then the Site Content Navigator is a useful plugin you might want to checkout. With this plugin you can enable a sticky navigation on any of your posts, pages and/or custom post types. Then use the options to set bar ending, overlap, section CSS selectors (headings, divs, etc), tooltips, visibility and more.
- Sticky menu
- Customizable progress bar
- Define page sections
- Advanced settings
- Custom font & CSS options
- Per post options
- Sidebar widget
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.