how to add a floating navigation menu to wordpress

You found an awesome article. You read it all the way through the end, and the information made you want to check out more of what the website had to offer. But to browse the other pages on the site, you have to scroll all the way back up to the top of the page to find the menu.

Sure, it only takes a few seconds. And sure, it’s not that much of an inconvenience in the grand scheme of things.

But when it comes to how people browse the web, a few seconds and a slight inconvenience can actually make the difference between whether or not people take an action, or click away from a page and move on with their day.

If you want to make your website menu more visible and accessible, no matter where on the page a visitor is, one option you have is a floating navigation menu.

What is a Floating Navigation Menu?

A floating navigation menu, sometimes called a sticky navigation menu, is a menu that stays visible on the page even as you scroll down. No matter where a visitor is on the page, they’ll see your menu options either along the top or side of the page.

To help you visualize, here are two examples of what a floating navigation looks like. Bookshop.org keeps their floating navigation menu at the top of the screen:

While Nicecream.com keeps theirs along the side:

In both cases, the most important navigational links the business wants visitors to know stay with you as you move through the page. 

3 Pros of Using a Floating Navigation Menu on Your Website

Floating menus are a practical design feature to consider, since they add some useful functionality to your website. In particular, they provide three main benefits. 

1. A floating menu keeps your most important pages visible.

“Out of sight, out of mind” may be an old adage, but it’s one that still holds some truth. Many of your visitors will need to see a link in order to know the page it leads to is there as a possibility. And if those navigational links disappear while they’re focused on perusing the content of the page they’re on, it may never occur to them to go back and see what they missed. 

When you keep all your main pages visible the whole time a visitor’s on the site, you ensure they can see their primary options for where to go next. And seeing them is the first step to considering a click. 

2. It increases the chances that visitors will browse more of your website.

One of the first lessons every website owner learns is how hard it is to get people onto your website to begin with. The hard work you put into marketing your site and earning traffic is worth a whole lot more if you can convince your visitors to stick around and check out more of your site than the first page they land on.

Using a floating menu can help with that. When visitors have easy access to the menu of options available to them on the site, the chances that they’ll see something they’re interested in and click on it go up.

According to ContentSquare,a retail website saw a significant decrease in bounce rates, and 10% increase in conversions after introducing a sticky navigation bar to their website. That’s only one example, but it suggests that keeping the menu visible longer can yield real results.

3. It improves the visitor experience.

In a 2018 Clutch survey, 94% of respondents cited easy navigation as a useful website feature—making it the most popular answer. If you care about building a website that people find intuitive, making sure the menu is easy to find is an important part of the equation. And a floating navigation menu achieves that.

top 7 website features include easy navigation

While it’s a few years old, a usability study published in Smashing Magazine found that floating navigation menus made navigation 22% faster. When people can find what they’re looking for faster, that creates a better overall experience. You can reduce frustration, and make the time they do spend on your site more worthwhile. 

3 Cons of Floating Navigation Menus

If the benefits were the only side of the story here, every website would use floating menus. But the choice to include a floating menu comes with some downsides as well. 

1. It takes up space.

When designing a website, space is at a premium. You want to be thoughtful about every bit of the page. If you try to pack in too many elements or too much information, your page will be cluttered and confusing. And any unnecessary information you include could distract from the most important parts of the page you want to draw attention to. 

In order for a floating menu to be visible on the page at all times, it must take up space on the page at all times. That’s space it’s taking away from something else.

Web designers must carefully consider whether the information and value provided by the floating menu is worth the space it requires. In some cases the answer will be yes, but in others it’s decidedly a no. 

2. It may annoy some visitors.

We’ve established that almost all visitors consider easy navigation crucial. But different people have different opinions on what that means. And you may well have visitors that are annoyed that a floating menu takes space away from the main thing they’re trying to do on the page. 

That can particularly be a concern on mobile devices, if they have to put more effort into scrolling because the floating menu means they can’t see as much else on the screen, you risk causing annoyance.

And in some cases—if you’re not careful in the design stage—a floating menu could end up blocking the content on the page, which would definitely cause annoyance. 

3. It’s more work to add and maintain than a static menu.

If the WordPress theme you used to build your website has a static menu, then changing your website over to a floating menu will require extra work on your end. And making sure the menu still looks good with all future website updates can mean even more work.

On top of that, with WordPress websites, every new plugin you add means one more thing you have to update, and every update means checking on a plugin’s compatibility with the current WordPress version.

That all adds up to more effort. For some website owners, the benefits won’t be worth the extra time and energy you’ll have to put toward adding and keeping floating navigation on your website. 

How to Add A Floating Navigation Menu in WordPress

If you have a WordPress website, adding a floating navigation menu doesn’t have to require complicated coding. As a first step, check to see if the theme you used offers an easy way to enable a sticky navigation menu on your website. You can go to Appearance in the main menu, then select themes. There you’ll see the option to select to Customize your theme. 

customize theme in wordpress dashboard
view theme details in wordpress

If your theme has built-in support for floating navigation, this is where you’ll see the option to enable it.

If not, your best bet is to use a plugin to add the functionality. A number of different WordPress plugins enable floating navigation menus. Some popular choices to consider are:

Decide which plugin makes the most sense for your needs. Get it installed, then follow the plugin’s setup instructions to get your menu working the way you want it to. 

Make it Float 

Your website may not need a floating menu, but if it will help your visitors find what they need faster and more easily, then adding one could be well worth it.

Anything that improves the user experience and makes your visitors more likely to stick around and visit more pages on your site is a good thing. A floating navigation menu could be a useful tool to help you accomplish that. 

Kristen Hicks is an Austin-based freelance content writer and lifelong learner with an ongoing curiosity to learn new things. She uses that curiosity, combined with her experience as a freelance business owner, to write about subjects valuable to small business owners on the HostGator blog. You can find her on Twitter at @atxcopywriter.