Do you want to create a floating navigation menu in WordPress that will always be visible regardless of how much you scroll down a page? If yes, then you want to create a sticky floating navigation menu. A sticky floating navigation menu will follow visitors through a page and always be visible. It is very useful for the longer pages on your website.
Navigation menus are crucial to helping your visitors navigate your website. The more sections that are added to your website, the harder it is for first-time visitors to navigate your site. You always want to keep your website compact and easy to navigate at all times. Today I will demonstrate how to create a sticky navigation menu in WordPress using the Sticky Menu (or Anything!) on Scroll plugin.
Why Use a Sticky Floating Navigation Menu
Navigation menus are widely used and for good reason. It is very simple to set up a menu in WordPress and this should be one of the first things you do on your website. These menus help your visitors find their way on your website and at the same time allow you to promote your own content, as it always appears on the navigation menu. Menus are not just used for displaying your content. They can have other options like contact information, affiliated deals, sister websites, etc.
The best part about a sticky menu is that it follows your users down a page. This is great because when they finish reading a blog or article on your website they can immediately use the menu to find a new one to read instead of having to scroll back up to the top. It saves them time and they are more likely to view your other content when it is right there.
How to Create a Custom Sticky Navigation Menu in WordPress
Today I will demonstrate how to create a sticky navigation menu in WordPress using the Sticky Menu (or Anything!) on Scroll plugin. It’s very easy to set one up using this plugin, but you will already need a menu in place on your website or create one first and then follow this tutorial. The plugin will do all the work and you just have to know the menu’s CSS ID and this plugin will make it sticky for you. You can always change the menu whenever you add new content or sections to your website.
Begin by clicking on Plugins and selecting the Add New option on the left-hand admin panel.
Search for Sticky Menu in the available search box. This will pull up additional plugins that you may find helpful.
Scroll down until you find the Sticky Menu (or Anything!) on Scroll plugin and click the “Install Now” button and activate the plugin for use.
On the left-hand admin panel click on Settings and select the Sticky Menu (or Anything!) option. This will pull up the main settings page.
The first thing you will need is a CSS ID. To get it, simply visit your website’s live page. Go to your website’s menu and right click it. Select the Inspect option. You will see your browser screen get split between the website and code. Scroll through the code until you find the following line.
On the live page instead of CSS ID you will have an actual ID number. Highlight and copy it and paste it into the first textbox, but include a # in front of the ID.
The second option in the settings screen is to choose how much space you want the sticky to have from the top of the screen. It is measured in pixels and I would recommend leaving it blank and playing with the settings once the page goes live. The next box is already checked by default and will add space for the admin bar. If you do not want that to be present, then simply uncheck the box.
The fourth option will help keep your website mobile friendly. This will eliminate the sticky menu when a screen is smaller than the desired size. This is important for a mobile screen because there is not much space to start with. I would recommend looking at the popular larger phone screen sizes and using that as the entry. If you have taken no other efforts at making a mobile-friendly website, then you may also leave this blank, but there is a very large percentage of traffic that comes from mobile users.
The last box has the opposite effect as the fourth. It will eliminate the sticky menu when the screen is a certain size. This does not have much use, but you may choose a screen size if you wish. Once you have selected all of the settings you want, click on the “SAVE SETTINGS” button.
Congratulations, you can now go to your live website and see that the sticky menu is working. Keep in mind that if you cannot scroll down far enough on a page, it will not move. If it is not working, double check that the CSS ID is correct and has a # in front of it. Remember, you can always add a gap at the top of the screen if you think it would look better at any time.
Always Help Your Visitors Find Your Content
A navigation system can definitely help your visitors locate new sections, blogs, and other content offered by your site. Menus are very strong tools for every website. Always make sure your menu items are easy to understand and work correctly. For example, don’t make an item labeled Dogs and have it link to a Cat page.
The advantage of a sticky navigation system is that it will follow you visitors to the bottom of the page. This is great because if they enjoyed the content they will want more and can use the navigation menu to locate more content. You can also use the menu to advertise less popular content in hopes that your visitors will give it a try and enjoy it.
Have you added any minimum or maximum screen size options for mobile screens and larger computer monitors? Do you find that adding a gap makes the sticky menu look better when scrolling through pages?
Author: Ron Helms
I currently work for GreenGeeks as a Support Technician. My primary roles are supporting our VPS and Dedicated server clients, as well as performing site migrations. With experience in the web hosting industry since 2009, there is rarely a question I can’t help answer. In my spare time, I enjoy gaming and working on cars as an automotive enthusiast.