How to make sticky floating menus in WordPress – The menu is an important part of a website which is made to make it easier for users to navigate the website and display some of the most important parts of the website. Because the menu is an important part, many website owners or theme developers make this section more attractive such as the Mega menu which can display many sub menus or even links to popular related posts and is accompanied by thumbnail images, there are also those that make the menu always look floating or sticky at the top when the page scrolls down.
In this article, I will discuss one way to make your website menu more attractive with a menu that will always float at the top even though the page is scrolled down, a menu like that is called a Floating Sticky Menu. Many popular websites use floating sticky menus such as The Next Web.
By displaying this sticky menu, it will make it easier for your site users to move faster navigation because you don’t need to scroll up again when you want to access your website’s menus. And here’s how to easily create a floating sticky menu in WordPress. Here I will give you two ways to create a sticky floating menu, namely by plugin and manual.
How to Make a Sticky Floating Menu with a Plugin
This first method is certainly easier for all users and I prefer to use this method for beginners. And to get started, the first thing you need to do is install and activate the plugin Sticky Menu (For Anything!). And if you don’t understand how to install a plugin on WordPress, please read the following article » Complete guide on how to install Plguin WordPress.
After activation, please enter the menu Settings »Sticky Menu (For Anything!) to configure the plugin.
First you have to enter the CSS ID of the navigation menu that you want to make sticky or floating.
To get your CSS ID, please use the tool in your browser to find the CSS ID used by your navigation menu. To do this, simply visit your website and hover your mouse over the navigation menu. After that, you need to right click and select Inspect Element from your browser menu.
Doing so will cause the browser to split your screen, and you will be able to see the source code for your navigation menu. And find a line of code like this:
<nav id="site-navigation" class="main-navigation" role="navigation">