Question

In wordpress I have developed a website. In that I have two sidebars. In the left sidebar I have the wordpress custom menu. So as the page is scrolled down I want the left sidebar menu to be at fixed position so I just used this jQuery

    jQuery(document).ready(function () {  
  var top = jQuery('.widget_nav_menu').offset().top - parseFloat(jQuery('.widget_nav_menu').css('marginTop').replace(/auto/, 0));
  //console.log(top);
  jQuery(window).scroll(function(event) {
    // what the y position of the scroll is
    var y = jQuery(this).scrollTop();
    //console.log(y);
    // whether that's below the form
    if (y >= top) {
      // if so, ad the fixed class
      jQuery('.widget_nav_menu').addClass('fixed');
    } else {
      // otherwise remove it
      jQuery('.widget_nav_menu').removeClass('fixed');
    }
  });
});

This is working fine when I have something above my menu. But if there is only menu then the content is floating part is merging over the menu. Now when you will go to this live site you can see the actual issue.
In this site when you will go to payroll software page and will scroll the page, you can see the left menus will be fixed at top part as I have used jQuery. Here it is okay. But when you will go to the free trail or buy page and will scroll down the page then you can see the main content part is merging over the menu. So can someone kindly help me to solve this? Any help and suggestions will be highly appreciable.

Note
When visiting the site if it shows 500 error then just refresh the page it will work again.

Answer 1

Add a transparent border to the #teritary div style, defined at line 1673 in your wp-content/themes/ValuePayroll/style.css file:

#teritary {
  width: 230px;
  float: left;
  margin: 0 10px 0 0;
  border: solid 1px transparent;
}