Solution 1 :

Rejowan Ahmed
The main problem is with your design, don’t keep the scroll in the sidebar the design itself is not intuitive
also you can refer to jquery plugins which resolves you issues check out bootstrap JS Dropdown feature in navs and then try to change your sidebar

Solution 2 :

Finally I have got the solution. A same question was asked here before and it worked for me. See the question below.

Jquery Nice scroll not working

Problem :

I am Rejowan Ahmed. In one of my project I am using nicescroll as the default scrollbar plugin. Now I have faced a greater issue. I have sidebar with several drop-down menus. And the sidebar is fixed. I am using nicescroll there. But when I open bottom dropdowns the scrollbar can’t detect the height. So, it hides the contents below it. How to fix it? Or is there any other good plugin which has no such problems? Help me please! Here is the code


<div class="sidebar scrollbar shadow-lg">
  <div> Content Here With Dropdowns </div>


  position: fixed;
  overflow: auto;
  height: 100%;
  bottom: 0;
  left: 0;
  min-width: 240px;
  margin: 0;
  font-size: 18px;
  padding-bottom: 50px;


$(document).ready(function() {
        cursorcolor: "rgba(44, 187, 244, 0.2)",
        autohidemode: "cursor",
        cursorwidth: "8px",
        cursorborder: "none",
        cursorborderradius: "2px",
        background: "rgba(10, 161, 219, 0.1) none repeat scroll 0% 0%",
        cursorminheight: 20,


Comment posted by Belegnar

Speak with code, please

Comment posted by Rejowan Ahmed

I have tried all the ways. It doesn’t work. So I have stated the old codes here. I did keep the menus in another div and made it fixed, added the scrollbar to it. But it didn’t work. Can you suggest me any other plugins?