How to Create a Sticky Floating Navigation Menu in WordPress

One of our users recently inquired about how to Create a Sticky Floating Menu for their website.

As users scroll down the page, sticky navigation menus stay on the screen. This keeps the top menu visible at all times, which is good for the user experience because it contains links to your website’s most important sections.

We’ll show you how to make a sticky floating navigation menu in WordPress in this article.

What is a Floating Sticky Navigation Menu?

As a user scrolls down the screen, a sticky or floating navigation menu sticks to the top of the screen. This ensures that your menu is always visible to users.

Here’s an example of a sticky menu in action. We’ll show you how to make a menu that looks exactly like this for your own website:

When and why should sticky menus be used?

The top navigation menu usually contains links to a website’s most important sections. A floating menu keeps those links visible at all times, saving users from having to scroll back to the top. It has also been shown to increase conversion rates.

If you run an online store, you probably have links to the cart, product categories, and product search in your top navigation menu. Making this menu sticky can help you increase sales and reduce cart abandonment.

A sticky navigation menu is built-in to some of the best WordPress themes. To enable this feature, go to Themes » Customize in your theme’s settings.

If your theme doesn’t have this feature, keep reading to learn how to make a sticky floating navigation menu in any WordPress theme or WooCommerce store.

Method 1: Using a Plugin, Create a Sticky Floating Navigation Menu

This is the most straightforward method. It is highly recommended for all WordPress users, especially beginners.

The Sticky Menu (or Anything!) on Scroll plugin must then be installed and activated. See our step-by-step guide to installing a WordPress plugin for more information.

To configure the plugin settings, go to Settings » Sticky Menu (or Anything!) after it’s been activated.

To make a sticky navigation menu, first enter the CSS ID of the menu you want to make sticky.

To find the CSS ID used by your navigation menu, use the inspect tool in your browser.

Simply go to your website and click on the navigation menu. Following that, right-click and choose Inspect from your browser’s menu.

This will split your browser screen, allowing you to see the navigation menu’s source code.

You must locate a line of code pertaining to your navigation or site header. It will resemble the following:

Bring your mouse cursor over the different lines of code in the Inspect pane if you’re having trouble finding it. When you have the correct line of code, the navigation menu will be fully highlighted:

Our navigation menu’s CSS ID is site-navigation in this case.

All you have to do is add a hash to the beginning of your menu’s CSS ID in the plugin settings. That’s #site-navigation in this case.

Please remember to save your changes by clicking the ‘Save Changes’ button at the bottom of the page.

Now you can see your sticky menu in action on your WordPress site. As you scroll down the page, it should stay in place, like this:

The space between the top of your screen and the sticky navigation menu is the next option on the plugin’s settings page. This setting is only required if your menu overlaps an element that you do not want to be hidden. If this isn’t the case, disregard this option.

We recommend that you leave the box next to the option ‘Check for Admin Bar’ checked. This allows the plugin to give the WordPress admin bar, which is only visible to logged-in users, some extra space.

On our test site, you can see that the admin bar is correctly displayed above the sticky menu:

If a user is visiting your website on a smaller screen, such as a mobile device, the next option allows you to unstick the navigation menu:

You can see how your site looks on mobile and tablet devices. If you don’t like the way it looks, simply increase the resolution to 780px for this option.

After making any changes to your options, don’t forget to click the Save Changes button.

Method 2: Create a Sticky Floating Navigation Menu by Hand

This method necessitates the inclusion of custom CSS code in your theme. For beginners, we don’t recommend it.

To access the WordPress theme customizer, go to Appearance » Customize first.

Then, in the left pane, click ‘Additional CSS’ and paste this CSS code there.

1 2 3 4 5 6 7 8 9 10 11 12 13

#site-navigation {     background:#00000;     height:60px;     z-index:170;     margin:0 auto;     border-bottom:1px solid #dadada;     width:100%;     position:fixed;     top:0;     left:0;     right:0;     text-align: center; }

Note that this will result in a black-background navigation menu. Change the number next to the background if you want a different color. Using the background: #ffffff

Simply replace #site-navigation with your navigation menu’s CSS ID, then hit the Publish button at the top of the page.

To see your sticky floating navigation menu in action, go to your website:

What if your navigation menu is normally displayed below rather than above the site header? If this is the case, this CSS code may overlap or appear too close to the site title and header before the user scrolls:

By adding a margin to your header area with some additional CSS code, you can easily adjust this:

1 2 3

.site-branding { margin-top:60px !important; }

Replace site branding with the header area’s CSS class. Before the user scrolls down, the sticky navigation menu will no longer overlap your header:

We hope you found this article useful in creating a sticky floating navigation menu for your WordPress site.