Do you know that, most of the magazine sites uses the sticky floating navigation menu when presenting their sites to visitors? Also, now a days, most of the websites do add this feature within their site, as it will be easy for the visitors to navigate their sites. So, if you too want to create sticky floating navigation menu in your site then, you can follow this article. Let’s move ahead and learn about how to do it, shall we?
How to create sticky floating navigation menu in WordPress using plugin?
For creating sticky floating navigation menu in WordPress, we will use the plugin: Sticky Menu (or Anything!) on Scroll within our site. So, let’s install it in your site and proceed on creating the sticky floating navigation menu in our WordPress site, shall we?
So, first of all, to install this plugin, visit Plugins->Installed Plugins section and then, click on Add New button. Now, search for Sticky Menu (or Anything!) on Scroll plugin and then, install it in your site and just activate it. After that, this plugin is ready to make sticky floating navigation menu in your WordPress site.
Now, after the activation of this plugin, you can see the extra section of Settings->Sticky Menu (or Anything!), from which you manage the sticky elements for your site, provided via this plugin. Here, in this article, since we are creating sticky menu, let’s visit your site and find out what the sticky element class or id is.
Here, in this article, we are taking Storefront theme, for creating sticky floating navigation menu for our site. Now, we will find the class or id in which the menu resides for this theme. For this to know, we will inspect the elements and find the required class or id. You can follow this link, to know about how to find it.
In the above screenshot, you can find that the required element class for this theme as marked above is: .storefront-primary-navigation
Sticky Menu (or Anything) plugin setting
Now, visit the plugin settings and then, under Basic settings and under the option of Sticky Element, add the class you have found out via inspecting elements. Here in our case, it is: .storefront-primary-navigation
In the other settings provided via that plugin, add the required settings as needed for your site. For example, in that very settings page, you may need to adjust the last and second last settings as needed, which make the menu sticky on certain devices only. Other’s, you can leave those as default.
Now, after you have applied the settings to that plugin, you can see the similar result for your site too:
For this theme, we had to add extra CSS code as below to make the navigation menu bar background as white:
.storefront-primary-navigation {
background: #fff;
}Conclusion
If you have followed this tutorial properly and can now easily create sticky floating navigation menu in your WordPress site then, we can assume that you are more familiar onto this than before. However, if you are still confused and want to know more then, you can do drop the comment below in the comment box and we will follow it up.
You may also want to read:
