Ever wanted to have a main navigation bar that follows the visitors of your WordPress site when they scroll down the page? That’s called Sticky (Floating) Navigation. Most new themes have sticky navigation in place, but this tutorial is for the ones that don’t.
Luckily, it’s really quick to add and it can improve user experience a lot. It can be done in two ways, both are quite simple but for the purpose of this tutorial, we’ll stick to the method using a plugin. Ready or not, the tutorial starts right now.
You can either watch the detailed video tutorial below or scroll below that to read the image/text version of the tutorial.
Let’s Get Into It
What you need to do first is find the right plugin and install it. I’ve tested different plugins and we’ll be using the only one compatible with the 4.8 WP version as of this writing: myStickymenu.
To find the right plugin, go to Plugins menu and click on Add New.
In the search box, type in ‘sticky header’ and click on search.
The best plugin compatible with the current version of WordPress(4.8) is the previously mentioned “myStickymenu” plugin.
Install the plugin by clicking on Install Now and then click on Activate.
After you activate the plugin, you’ll notice that you have a new option in the settings menu called myStickymenu. Click on it to open it.
In most cases, the only thing you’ll need to change in the settings is the Class of the sticky header.
The class ID looks like this. The default is .top-nav which is used in many themes. So check your website to see if the navigation is sticky with the default settings.
If the .top-nav is not the class of your header, the you’ll need to a little investigating.
To find the class of your header right-click on it and then click on Inspect.
This will open the source code where you’ll see the class of your menu bar.
When you hover over the row with the class, the menu should turn blue. This proves that the class you selected wraps the whole menu. What you need to do next is copy the class and paste it inside the sticky class box.
Ensure that there’s a period in front because a period indicates that it’s a class. A hashtag would indicate that it’s an ID and the plugin cannot work with that.
Once you have the right class in the plugin settings, save the changes and refresh your page. Your header menu should now be sticky and follow you when you scroll down the page.
Customizing the Sticky (Floating) Header
Once you’ve installed a floating header, you can customize it in a number of ways:
- Change the colour
- Change the transition time
- Change the opacity
- And much more
Changing the colour
First of all, the orange colour doesn’t seem to go well with the example page so I’m going to change it. You can change the colour by going back to the myStickymenu settings and changing the color to whatever you like.
Adding a CSS code
Inside the same menu, you have the option of adding custom CSS code. If you want to do the CSS manually in your stylesheet, check the “disable CSS style” box and add the CSS code to your stylesheet directly.
Changing the Opacity
If you want your sticky menu to be more or less opaque (see through), you can change the opacity inside the sticky menu settings. The options are between 1% and 100% opaque.
Changing the Transition Time
The transition time is the time it takes for the nav to appear once it is triggered.
0.3 seconds as shown in the screenshot below is quite good but you can adjust it if you want to and check the results after you save changes and refresh the page.
You may as well adjust your sticky navigation menu to be compatible with mobile devices if possible. If not, it’s better to disable it at certain width. This is done in the “Disable at Small Screen Sizes” option. The default option works for the demo site, you might want to adjust it if it doesn’t work for you, now that you know how.
And that’s it. Creating a sticky floating navigation menu isn’t difficult at all and it may prove to be a useful tool for improving your user experience. No one likes scrolling up and down to find the menu so use this tool to make your page more convenient for your visitors. Thanks for following/watching this tutorial.
For customizing your WordPress site further, make sure you subscribe to my WordPress Tutorials – WPLearningLab channel and click on the bell notification not to miss any of the useful WordPress tutorials.