What is sticky menu or header?
The sticky menu or header refers to the menu or header that is not scrollable and they stay viewable all the time in your website or blog irrespective of your actions like scroll up or down. The sticky menus are helpful in terms of navigation through the menus, because menus hold all the posts or pages. You don’t have to scroll up to go to a particular page or post.
For example, I want that header section and main menu remain sticky to the all the time.
In this article we are discussing about how to make your main menu or header or both (header and menu) sticky. In order to do this, you can use a very easy-to-use plugin “myStickymenu”. Before downloading, have a look at the “Customize” section of the theme. Some themes like “Ultra Seven” already have in-built option of enabling/disabling sticky menu. Downloading extra plugin always leads to slowing down the website/blog.
If your theme does not provide such facility then follow below steps:
1) Go to “Dashboard”.
2) Go to “Plugins”.
3) Click on “Add New”.
4) Type “myStickymenu” in search box and hit Enter.
5) Install and activate the plugin.
You can see one element got added to “Settings”. Go to “myStickymenu” under “Settings” tab. You can see the settings of sticky menu here. There are three tabs – General Settings, Style and Advanced. Default Sticky Class is “navbar”.
Now open your site, right click on the header and click on “Inspect”. Inspect window will pop up on right hand side. Find out the “id” or “class” of the header. Copy either “id” or “class” name and paste it in a notepad.
Same way, right click on the main menu and click on “Inspect”. Find out the “id” or “class” of the main menu. Copy either “id” or “class” name and paste it in a notepad.
Go to setting of the myStickymenu. Under “General Settings” tab, in the Sticky Class text field, paste both “id” or “class” of the main menu and header separated by comma (,) and prefixed by “#” if it is a “id” or “.” if it is a “class”. Keep other settings as it is and click on “Save Changes” button.
In the “Style” tab, you have settings for sticky menu. You can change the background colour, opacity, transition time etc. You can give your own style using CSS. If you have made some changes, then click on “Save Changes” button.
Under “Advanced” tab you have options to disable sticky menu for particular elements. If you tick the box again a particular element for example you have ticked the box for “posts” then header and main menu will be scrollable in all the posts.
Is this article helpful? please comment below.