Today morning I was checking a WordPress plugin out of curiosity, that is “myStickymenu”. A simple, lightweight plugin which lets you add a nice looking, functional sticky navigation menu on your website powered by WordPress (self-hosted), a lot easier and quicker way.
Actually I was thinking, is there any way of adding a sticky menu/ header without much/ any hassle? Actually there are many ways if you take custom approach, means by using CSS or JS/ JQuery.
But for all these you need to do some amount of coding and scripting. Not too much, but for the sake of implementing it you have to do it.
But let’s say you are not too much savvy with coding/ scripting, so what you want is, just any plug and play mechanism to accomplish this task.
If your site is developed using WordPress then, adding sticky navigation menu is really simple, by just using a plugin called “myStickymenu”. I must say, it’s exactly what you want, as you are looking for a quicker and easier solution.
Want to know more regarding this plugin, right ? So, here we go.
At first download “myStickymenu” plugin from WordPress Plugin directory by following this link. After downloading it, install and activate this plugin in usual way.
Now just go to “Settings” -> “myStickymenu” option inside WP Admin Dashboard.
After clicking on the “myStickymenu” option, you will be landed on the Settings page of it, from there you can customize different options regarding how you want to display the sticky navigation menu according to your need.
All the available customization options will be covered in this article in as much detail possible with necessary reference for further customization.
In “myStickymenu Settings” page, the first option is “Sticky Class”. What’s the use of this option?
If you are using a custom WordPress theme, then inside “Sticky Class” field you have to enter the class or id of the div, inside which your theme’s navigation menu or header is wrapped.
So this option is mainly to identify the div, which you want to make sticky using this plugin.
By default, there you will find a class called “.navbar” before changing anything, it’s actually the class of “Twenty Thirteen” theme.
The next option is “Sticky z-index”, based on the requirement of your theme you can change the z-index value to make it visible on the top of all layers.
If you want to change background color of the sticky navigation menu or header matching properly with your site’s color scheme, then there is an option called “Sticky Background Color”, using this you can choose any color you want.
Whether you want to make the background of the sticky bar transparent or in solid color?
Choice may be anything depending on the design but whatever your requirement is, you can make the sticky bar’s background in whichever way you like by changing the value of “Sticky Opacity” option between 1-100.
How slow or how fast the sticky navigation will menu arrive when you start scrolling on the web page, can be controlled by this option called “Sticky Transition Time”. You can enter the suitable value in second as per your need or how you want to show it.
“Disable at Small Screen Sizes”, what’s this option is for? Let’s say you want to disable the sticky header from a certain screen size.
So in this field you can enter the width/ size in pixel, from now on for all screen sizes less than the mentioned one, the sticky bar will never show. If you make the value 0 then this feature will be disabled and for all screen sizes the sticky bar will display.
Next you will find two more options of nearly same utility, they are “Make visible on Scroll” & “Make visible on scroll at Homepage”.
In these fields you can set value in pixel regarding after how much scroll the sticky navigation menu will be displayed. The first option is generic, for all pages and the second option is specifically for the home page. Based on your requirement you can utilize one or both of the fields.
Whether the sticky bar will come into visibility by sliding in or fading in? You choose the option by check in or not check in the option “Fade or slide effect”.
If you want to change the default style of the sticky menu then there you will get another option called “.myfixed css class”. From this section you can customize the default look of the sticky bar by writing Custom CSS.
If you want to know more about the styling of “myStickymenu”, then there is a detailed tutorial, have a look.
The last option is “Disable CSS Style”, if you don’t want to use any of the default CSS and want to write everything from scratch then you can check this option, otherwise keep it unchecked normally.
So, I hope from now adding sticky navigation menu on you website will not be a trouble any more. What you think, isn’t it so easy?