WordPress themes offer many locations to display different menus. Truly it depends on the theme developer’s mood/motto to provide sticky menu or not. It is because mainly developer wants to provide this option when you buy the theme. In free themes, this option may not be available just because it is a free theme.
Why Sticky?
Sticky menu is mainly hang the menu when user scrolls through the page/post. It is really required if the page has more than 5 to 6 sections and user need not to scroll up to find the menu. Especially in mobile view, user rarely goes up and find the menu if it is not sticking around. This really increase your conversion rate and decrease the bounce rate. More the pages browsed, more time spent on the website. That’s right. If you are monetizing your content, it is one of the options to increase the conversion rate.
How to make the menu sticky?
There are many options available for user to make it sticky.
- Find the good theme which provide this option or go for Pro themes.
- Install the plugins and make the sticky. ( will explain the plugins you try to make the menu sticky and my opinion on it.)
- Use the Customize -> Additional CSS to make it sticky.
We, personally try the last option first and see how it really works. Because most of the time it doesn’t give problems. But, if you have any slider like WP smart Slider or Revolution Slider, HT slider, Owl Carousel then, there may be some gap appears below the menu bar and Hero Slider.
Next We tried with plugin. If it is not working as expected, we go for Pro themes.
Here is the code to make the menu sticky.
You need to find the navigation css class to find the class used to format the menu. We have used the same code to achieve the stickiness of menu.
#site-navigation{
height:60px;
background-color:black;
z-index:170;
margin:0 auto;
width:100%;
position:fixed;
top:0;
left:0;
right:0;
text-align: center;
}
Let us know how it works. we will revisit the css code if you find any improvement is required.
Cheers
Recent Comments