How to Add a Sticky Floating Navigation Bar in WordPress

The sticky Navigation bar allows users to easily navigate to any section and also helps to a kepp user engaged on your site. in this article, we will tell you the simplest way to add a sticky navigation bar using WordPress plugin.


1.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.

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

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

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

5.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">

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

7.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.

8.After that, t 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.

9.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.


Plugin Features:

• Any element can stick: although common use is for navigation menus, the plugin will let you pick any unique element with a name, class or ID to stick at the top of the page once you scroll past it. Use it for a sidebar, Call-to-action box, banner ad, etc.
• Positioning from top: optionally, you can add any amount of space between the sticky element and the top of the page, so that the element is not always stuck at the “ceiling” of the page.
• Enable for certain screen sizes only: optionally, you can set a minimum and/or maximum screen size where the stickiness should work. This can be handy if you have a responsive site and you don’t want your element to be sticky on smaller screens, for example.
• Push-up element: optionally, you can pick any other element lower on the page that will push the sticky element up again (for example a sidebar widget).
• Admin Bar aware: checks if the current user has an Admin Toolbar at the top of the page. If it has, the sticky element will not obscure it (or be obscured by it).
• Z-index: in case there are other elements on the page that obscure or peek through your sticky element, you can add a Z-index easily.
• Legacy Mode: in 2.0, a new method of making things sticky was introduced. In Legacy Mode, the old method will be used. See FAQ for details.
• Dynamic Mode: some issues that frequently appear in responsive themes have been addressing by adding a Dynamic Mode (Legacy Mode only). See FAQ for details.
• Debug Mode: find out possible reasons why your element doesn’t stick by switching on Debug Mode, and error messages will appear in your browser’s console.