The way to create a sticky floating navigation menu in WordPress
Recently one of our users asked us how to make a sticky navigation menu for their site.
Sticky navigation menus stay on screen as users scroll down the page. This makes the main menu always visible, which has a positive effect on the user experience as it contains links to the most important sections of your website.
In this article, we are going to show you how to easily create a floating navigation menu in WordPress.
What is a Sticky Floating Navigation Menu?
A sticky or floating navigation menu sticks to the top of the screen when a user scrolls down. This makes your menu visible to users at all times.
Here’s a sticky menu in action. We’ll show you exactly how to create a menu like this for your own site:
Why and when can sticky menus be useful?
Usually the top navigation menu contains links to the most important sections of a website. A floating menu makes these links always visible, eliminating the need for users to scroll up. It’s also proven to increase conversions.
If you run an online store, your top navigation menu will likely have links to the shopping cart, product categories, and product search. Making this menu sticky can reduce shopping cart abandonment and increase sales.
Some of the best WordPress themes have sticky navigation menu support. Just see your theme settings below Topics »Customize to activate this function.
If your theme doesn’t have this option, read on and we’ll show you how to easily create a sticky floating navigation menu in any WordPress theme or WooCommerce store.
Method 1: add your sticky floating navigation menu using a plugin
This is the easiest method. We recommend it to all WordPress users, especially beginners.
If you haven’t set up your navigation menu yet, check out our instructions for adding a navigation menu in WordPress.
After that you need to install and activate the sticky menu (or anything!) On the scroll plugin. For more information, see our step-by-step guide on installing a WordPress plugin.
After activation you have to visit the Settings »Sticky Menu (or anything!) Page for configuring the plugin settings.
First, you need to enter the CSS ID of the navigation menu that you want to make sticky.
You’ll need to use your browser’s inspection tool to find the CSS ID used by your navigation menu.
Just visit your website and move your mouse to the navigation menu. After that, you need to right click and select Inspect from your browser’s menu.
This will split your browser screen and allow you to view the source code for your navigation menu.
You need to find a line of code related to your navigation or your site header. It will look something like this: