Buy SEOPress Pro

Create Sticky Menu Sidebar Widget WordPress


Is your WordPress website support sidebar? And do you want to make it sticky? If so, you are on right article. Today we will write step by step instruction to make sticky sidebar in WordPress. Also we will write program to create sticky menu, sidebar and any section.

Sticky sidebar means sidebar will become fixed according page scroll. We can make sticky sidebar using WordPress plugin. Also if you know a little programming, then you can write JavaScript code.

We know both methods. So we will tell both to make sidebar sticky. First we will tell about a WordPress plugin. Because mostly bloggers do not know programming. So they can install and activate plugin to make sticky sidebar. And then we will write JavaScript code to make sticky sidebar. We will also write a little about to create sticky menu using plugin and custom code.

Let we start from WordPress plugin.

WordPress plugin to make sidebar sticky

We know about a great plugin, which can make widget of sidebar sticky within 1 minute. Name of this plugin is very similar to it’s features. And it is Q2W3 Fixed Widget.

We can browse and read about it on WordPress website. This plugin is available on official WordPress directory. So we can use Add New plugin page to install quickly. You can follow below simple steps to install and activate Q2W3 Fixed Widget.

  • First of all, we can open Dashboard of WordPress.
  • Now we can click on Add New under Plugin.
  • Here we can search for Q2W3 Fixed Widget keywords.
  • This plugin has developed by Max Bond.
  • Also it has installed on more than 60,000 websites.
  • Now you can confirm it and press install button.
  • Now you can Activate it.
  • Now we need to click on Fixed Widget Options. It is sub menu of Appearance.
  • Here you can update settings according design of WordPress theme.
  • And then you can save settings.
  • Now we need to go on Widgets menu. It is also sub menu of Appearance.
  • Here we can add new Widget and check Fixed Widget option.
  • Finally you can save this widget. Now this widget will sticky.

Let we explain a little about Fixed Widget Options. Here we need to set Margin top. Means how much blank space, we need above this sticky widget. And similarly, Margin Bottom means require blank space in bottom of this sticky widget.

Refresh interval means micro seconds of checking height of this widget. If we will set 1500, then this plugin will check height of sticky widget in each 1500 micro seconds. We can set 0 to disable sticky function of all widget.

We also need to set a pixel value in Screen Max Width option. Actually it will disable sticky feature in less width of browser. If we will set 800, then sticky feature will work only on higher than 800px width of browser. If we will leave it blank, then sticky feature will work on all browsers. Also you can read description of each option to update. You can take advantage of below image.

 

Create Sticky Sidebar Widget WordPress

This was initial settings of Q2W3 Fixed Widget plugin. Now we also need to check Fixed Widget option in added widget. You can take help of below image.

 

Check fixed widget option

Was that hard? But That’s All. Now our added widget will become sticky on page scroll. We can add premium features on this sticky sidebar. Because it will appear always for our visitors.

Sticky menu and sidebar using programming

We have told method of creating sticky sidebar using WordPress plugin. We can also make sidebar sticky using programming. Here in this section, we will tell  a simple method to make menu or sidebar sticky.

In short, we need to set a class to HTML of sidebar or menu. This class will contain style code to make any section fixed. We will use JavaScript to detect height of sidebar or menu. And we will set or remove class base on height of scroll.

Coding to make sticky menu

We will make Bootstrap menu sticky. Because bootstrap provide a class to create fixed navigation. And class name is navbar-fixed-top. Actually we can use this class in bootstrap menu to make menu fix top. And we will take advantage of this class to make bootstrap menu sticky.

Make sure we are using Bootstrap menu. However we can use any menu, but we need to set proper class and ID attributes to HTML menu.

Let we start coding. First of all, we need to set ID attribute to HTML of bootstrap menu. You can take advantage of below code.

  • <nav class=”navbar navbar-default” id=”navbar”>

You can see that we have added id=”navbar”. It will use to manage classes of this bootstrap navigation.

Now we can use below JavaScript code.

$(document).ready(function() {
  $(window).scroll(function () {
	 
	var h = $('#navbar').height()+70;
	
    if ($(window).scrollTop() > h) {
      $('#navbar').addClass('navbar-fixed-top');
    }

    if ($(window).scrollTop() < h) {
      $('#navbar').removeClass('navbar-fixed-top');
    }

	
  });
});

Actually this code will work on Window Scroll. First it will check height of menu and store in h variable. Now if menu height will greater than h variable, then this code will add navbar-fixed-top class to menu. Similarly if height of menu will less than h variable, then this code will remove navbar-fixed-top class.

if you know a little JavaScript programming, then you can easily understand. Actually navbar-fixed-top class use to set fixed position to menu. However you can take advantage of below css code.

.fixed-class{
	position:fixed;
	top:0px;
	left:0px;
}

If we are using custom menu, then we can use above CSS code. But i have told that you should know a little about HTML, CSS and JavaScript code. Otherwise you can just use above WordPress plugin.

Similarly we can easily create sidebar or any HTML section sticky. We can also update code according design of our theme. we need to update above JavaScript and CSS code. Also we can update HTML code, if there is not any ID attribute.

We hope that you have understood both methods to create sticky sections. Now we can create sticky sidebar,  menu and any section. But if you do not know programming, then above WordPress plugin should best for you.

However you can use Sticky Notification Bar For WordPress plugin to make sticky menu. It can easily create sticky menu with logo. We can also use it as sticky notification bar. We can also set custom colors in sticky menu. This is also good plugin, if you do not know programming, and you want to create sticky menu.

Have any Question or Comment?

Leave a Reply

Your email address will not be published. Required fields are marked *

Article Categories

.