How To Create Sticky Menu in WordPress
One of the most important part of a website is its menu or list. Sticky menu can make your contents easily accessible for users. If you want to increase site conversion rate, sticky listing is a good option in WordPress. You can make your list always in user sight by using sticky menu. We will show you how to make one, so follow me through this post.
What is a sticky menu?
Sticky menu is the part that is always visible for users. When user scrolls down to the bottom of the page, it will be in a fixed position, and won’t disappear.
When is it useful to use a sticky menu?
The links that are on the top of the website are mostly the most important ones. Therefore, if you want to make them always visible to users, use a sticky menu. This will also increase your conversion rate.
If you have a online store, you can put parts such as shopping cart, product categories and product search in a sticky menu. This may be helpful to increase your sales.
If you have a WordPress theme that supports a sticky menu, you can go to Customization in the display setting. If you don’t have a sticky menu in your template, this tutorial will be more useful for you.
How to create a sticky menu with plugin
If you are looking for the easiest way to create a sticky menu, a plugin is a great option for you. We use Sticky Menu (or Anything!) on Scroll plugin in this tutorial.
First, you should install and activate the plugin. Go to the Sticky Menu (or Anything! to configure the extension settings), after you activate the plugin.
Sticky element is the most important option on this page, which is the class or element of the menu you want to stick to. You can use inspect tool to find the element or class that is used in the menu.
In order to access inspect tool, move your mouse over the list, and right-click, then select Inspect. You can see your list source code.
Then you should find the line of code that corresponds to your site’s list or header. It is something like this:
<nav id = "site-navigation" class = "main-navigation" role = "navigation">if you can’t find this line, just move your mouse over different source lines in the Inspect section. If you go over the appropriate line, it will be highlighted.
You can see the Id of the site list in the image above which is site-navigation. You should add CSS Id with a hashtag in plugin setting.
Remember to click Save Changes at the bottom to save the work.
If you go to your site, you can see that the menu will stay still while scrolling.
There is option which controls the distance between the page top and your sticky list. You can use this option, If you want to determine when your menu overlaps with the element that you don’t want to hide.
Check for Admin Bar: If you enable this option, there will be a space for WordPress admin bar. This will allow that the admin bar be shown correctly above the menu.
The last options are for displaying sticky lists on different screens. If you enter a number, sticky menu won’t work for screens larger or smaller than that number.
How to create sticky menu in WordPress manually
In order to make sticky menu manually, you should add additional CSS to your template. To do this go to template customization page.
First, click “Extra CSS”. Next add this CSS code to it.
#site-navigation {
background:#00000;
height:60px;
z-index:170;
margin:0 auto;
border-bottom:1px solid #dadada;
width:100%;
position:fixed;
top:0;
left:0;
right:0;
text-align: center;
}This code default color for background is black, but you can easily change it. In “background:#00000;” , just put your preferred color code.
Next, all you have to do is to replace #site-navigation with your menu’s CSS Id. Then, click the Release button. The sticky menu is now created.
Sticky menu overlapping with site’s title problem
If you sticky menu overlaps with title, you can easily add a margin to the header by using this code:
site-branding {
margin-top:60px !important;
}Next, replace site-branding with your CSS header class.
Now you have a sticky menu which will make your website much better. As mentioned above, it will increase your conversion rate and you sales. And it will also make your menu more accessible for your users.
0 comments