How to Create a Sticky Floating Navigation Menu in WordPress

Have you noticed that many popular websites are now using sticky navigation menu. Normally, navigation menus are displayed on top and disappear as users scroll down. Sticky navigation menus float as users scroll down and are always visible on screen. In this article, we will show you how to easily create a sticky floating navigation menu in WordPress.

Method 1: Add Sticky Floating Navigation Menu Using Plugin

This method is easier and is recommended for all users. If you haven’t setup the navigation menus yet, then please see our guide on how to add a navigation menu in WordPress.

First thing you need to do is install and activate the Sticky Menu (or Anything!) on Scroll plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit Settings » Sticky Menu (or Anything!) page to configure plugin settings.

First you need to enter the CSS ID of the navigation menu that you want to make sticky.

You will need to use your browser’s inspect tool to find the CSS ID used by your navigation menu.

Simply visit your website and take 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 you will be able to see the source code for your navigation menu. You need to find a line of code like this:

<nav id="site-navigation" class="main-navigation" role="navigation">

In this example, our navigation menu’s CSS ID is site-navigation.

Go ahead and enter the navigation CSS ID in the plugin settings like this #site-navigation.

The next option on the plugin’s settings page is to define the space between the top of your screen and the sticky navigation menu. You can use this setting if your menu is overlapping an element that you do not want to be hidden. If not, then ignore this setting.

After that you need to click the checkbox next to the option: ‘Check for Admin Bar’. This allows the plugin to add some space for the WordPress admin bar which is only added for logged in users.

The next option in the settings page allows you unstick the navigation menu if a user is visiting your website using a smaller screen such as a mobile device.

You can test how it looks on mobile devices or tablets. If you don’t like it, then you can add 780px for this option.

Don’t forget to click on the save settings button to store your changes.

You can now visit your website to see your sticky floating navigation menu in action.

Method 2: Manually Add Sticky Floating Navigation Menu

This method requires you to add custom CSS code to your theme. If you haven’t done this before, then please see our guide on how to easily add custom css to your WordPress site.

First you need to visit Appearance » Customize to launch theme customizer.

Click on ‘Additional CSS’ in the left pane and then add this CSS code.

#site-navigation {
    background:#fff;
    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;
}

Replace #site-navigation with the CSS ID of your navigation menu and click on the Save & Publish button.

You can now visit your website to see your sticky floating navigation menu in action.

If your navigation menu normally appears after the site header, then this CSS code could overlap the site title and header.

This can be easily adjusted by adding a margin to your header area using some CSS like this:

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

Replace site-branding with the CSS class of your header area.

We hope this article helped you add sticky floating navigation menu to your WordPress site. You may also want to see our list of 15 best tutorials to master WordPress navigation menus.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.