Don’t know, how to create sticky menu in WordPress site? Fret not, you have come to the right place for getting the answer.
Sticky menus stay on the screen even when the audience are scrolling down the page.
This makes the menu always visible, irrespective of where you are on the page.
Having a sticky menu is good for user experience because it makes your website’s navigation easily accessible for the audience.
In this article, we’ll show you how to easily create a sticky menu in WordPress.
Table of Contents
What Is A Sticky Menu
A sticky menu is a fixed navigation menu on your website that remains visible at all times even if the user scrolls down & moves around the website.
A sticky menu simply sticks to the top of the screen. This is what makes your menu visible to users at all times.
Why Is Sticky Menu Required
The top menu on the header of your website contains a lot of links that are important to navigate your website.
If the menu is made sticky, it will always be visible to the audience, which will save their precious time from scrolling back to the top.
This will in turn improve the overall user experience for your website along with conversions & sales.
Many WordPress themes available now-a-days have in-built sticky menus in them, to enhance the user experience.
But, if your theme does not have an in-built menu, then we will show you how to create one from scratch with two different methods.
How To Create Sticky Menu In WordPress Site
So without further ado, let’s check out the two methods of how to create sticky menu in WordPress site.
Make Your Menu Sticky With A Plugin
Out of the two methods, this is the easiest one as it is done by using a WordPress Plugin & is more suitable for people who are just starting out.
Install & Activate the Sticky Menu & Sticky Header WordPress Plugin.
After you have successfully activated the plugin, go to Settings => Sticky Menu (or Anything!) from the left panel of your WordPress website.
Now for the most important step,
You will need to enter the Navigation ID of the Menu that you want to make sticky.
You will need to use your browser’s Inspect tool to find the Navigation ID used by your navigation menu.
Visit your website & right-click on the menu. Click on the Inspect option.
After you click on the Inspect option your browser screen will split in two & you will be able to see the source code for your menu.
Look out for the line of code that corresponds to your menu. You will find the Navigation ID there. It will look something like,
<nav id="navigation" class="wpbf-clearfix">
In our case, the Navigation ID is “navigation“
Now, all that needs to be done is to insert the Navigation ID i.e. “navigation” in to the plugin settings with a hash at the start.
So our Navigation ID will be #navigation.
You will have to enter your website’s Menu Navigation ID in the box, for this method to work for your website.
Anyway, by clicking on the Save Changes button at the bottom of the page we will save all the changes & run a test.
The menu has become sticky & remains in the same position at all times even when scrolling down the page.
Check out the picture below,
Make Your Menu Sticky Manually
In this method, you will have to manually add a custom CSS code to your WordPress theme.
Having said that, making changes to the code of your theme is not recommend for beginners.
Visit your WordPress website dashboard & Click on Open The Customizer link to launch the WordPress theme customizer.
After the WordPress theme customizer is launched successfully, click to Additional CSS.
Now, just add the following code to the Additional CSS pane,
#navigation
{
background:#0000FF;
height:60px;
z-index:170;
margin:0 auto;
border-bottom:5px solid blue;
width:100%;
position:fixed;
top:0;
left:0;
right:0;
text-align: center;
}
Don’t forget to put in your own Navigation ID instead of #navigation in the above code & you are all set.
You can also make some changes to your menu, such as, changing background color or decreasing the height etc.
Conclusion
We presume that now you know all about, how to create sticky menu in WordPress site. You don’t necessarily have to use a theme which has an in-built sticky menu. You can use any theme of your liking & add the functionality yourself.
You may also like,