Do you want to create a sticky floating navigation menu in WordPress?
The top navigation menu typically has links to all your most important pages. By making this menu sticky, you can keep it on screen as the user scrolls down the page, so it’s always within easy reach.
In this article, we will show you how to easily add a sticky floating navigation menu to your WordPress website.
What Is a Sticky Floating Navigation Menu?
A sticky or floating navigation menu ‘sticks’ to the top of the screen as a user scrolls down, so it’s onscreen at all times.
Usually, the top navigation menu in WordPress contains links to your website’s most important content. By making this menu sticky, visitors can click on those links at any time without having to scroll.
If you run an online store, then the top navigation menu typically has links to pages that are designed to convert, such as the checkout page and customer cart. By making the top menu sticky, you can often reduce cart abandonment rates and get more sales.
With that said, let’s see how you can easily create a sticky floating navigation menu in any WordPress theme or WooCommerce store. Simply use the quick links below to jump to the method you want to use:
Method 1: Add a Sticky Menu Using Your Theme Settings (Easy)
Some of the best WordPress themes have built-in support for sticky navigation menus. With that being said, it’s worth checking your theme settings by going to Themes » Customize in the WordPress dashboard and looking for any settings labeled ‘Menus.’
If you are not sure whether your theme supports sticky menus, then you can check the theme’s documentation or even contact the developer for help. For more information, please see our guide on how to properly ask for WordPress support and get it.
If your theme doesn’t have built-in support for sticky menus, then you’ll need to use one of the other methods below.
Method 2: Add Your Sticky Navigation Menu Using a Plugin (Recommended)
The easiest way to add a sticky navigation menu in WordPress is by using Sticky Menu (or Anything!) on Scroll. This plugin allows you to make anything sticky, including menus.
First, you’ll need to install and activate the plugin. If you need help, then please see our guide on how to install a WordPress plugin.
Upon activation, go to Settings » Sticky Menu (or Anything!).
Simply visit your website and hover your mouse over the navigation menu. After that, just right-click and select ‘Inspect’ from the browser’s menu.
This will open a new panel inside the browser, where you can see the source code for the navigation menu.
You need to find the line of code that relates to the menu or your site header. It will look something like this:
<nav id="site-navigation" class="main-navigation" role="navigation">
If you are struggling to find the code, then hover your mouse over the different lines of code in the ‘Inspect’ panel. The browser will highlight the navigation menu when you find the right code, as you can see in the following image.
In this case, the navigation menu’s CSS ID is
Once you have this information, switch back to your WordPress dashboard and add it to the ‘Sticky Element (Required)’ field.
You’ll also need to add a hash character (#) at the start, so
After that, click the ‘Save Changes’ button at the bottom of the page to store your changes.
Now, if you visit your WordPress website and scroll, the menu should stay at the top.
Sometimes, the sticky menu may overlap some content that you don’t want to hide.
If this happens, then you’ll need to define a space between the top of your screen and the sticky navigation menu by typing a number into the ‘Space between top of page…’ field.
Sticky menus can cause problems for devices with smaller screens, such as mobile devices. With that in mind, it’s a good idea to check the mobile version of your WordPress website from desktop.
If you are not happy with how the menu looks, then you can ‘unstick’ it for mobile users by finding the following field: ‘Do not stick element when screen is smaller than.’
Here, type in ‘780px.’
There are some more settings to explore, but this is all you need to create a working sticky navigation menu.
When you are happy with how the navigation menu is set up, click on ‘Save Changes’ to store your settings.
Method 3: Add a Sticky Floating Navigation Menu Using Code
You can also create a sticky navigation menu using CSS.
The best way to add custom code to WordPress is by using WPCode. WPCode is the best code snippets plugin that allows you to add custom CSS, PHP, HTML, and more.
Since you are not editing the theme files directly, you can avoid many common WordPress errors. You can also update your theme or switch to a completely different theme without losing your custom code.
You can also toggle the sticky menu on and off with a single click.
First, you will need to install and activate the free WPCode plugin. For more information, see our step-by-step guide on how to install a WordPress plugin.
Once the plugin is activated, go to Code Snippets » Add Snippet.
Here, you will see all the ready-made WPCode snippets you can add to your site. These include a snippet that allows you to completely disable comments, upload file types that WordPress doesn’t usually support, disable attachment pages, and much more.
On the next screen, just hover your mouse over ‘Add Your Custom Code (New Snippet)’ and click the ‘Use snippet’ button when it appears.
On the next screen, you need to type in a title for the code snippet. This is just for your reference, so you can use anything you want.
Then, open the ‘Code Type’ dropdown and choose ‘CSS Snippet.’
With that done, add the following snippet to the WPCode code editor:
border-bottom:1px solid #dadada;
This will create a navigation menu with a black background. You can use any color you want by changing the hex code next to
For example, using
background: #ffffff will give you a white menu background. If you are not sure what hex code to use, then you can look at a resource such as HTML color code.
You’ll also need to replace
#site-navigation with the CSS ID of your navigation menu. To find this code, simply follow the same process described above.
When you are happy with the code, click on the ‘Inactive’ toggle so it changes to ‘Active’, and then click on the ‘Save Snippet’ button.
Now, if your visit your WordPress blog or website, you will see the sticky floating navigation menu in action.
Depending on your theme, sometimes the navigation menu may appear below the site header instead of above it. In this case, the sticky navigation menu might appear too close to the site title and header or even overlap it.
If this happens, then you can add the following to your custom CSS snippet:
site-branding with the CSS class of your header area. To get this information, simply use your browser’s ‘Inspect’ tool and then follow the same process described in Method 2.
We hope this article helped you add a sticky floating navigation menu to your WordPress site. You may also want to see our guide on how to increase your blog traffic and our comparison of the best WordPress page builder plugins.