Dear princegoel072

Thank you for contacting Design Reset.

To add scroll in sidebar first you have to make sidebar fixed

.sidebar-wrapper {
    position: fixed;    ------------------ added
}

and then you have to min-height auto calculation

#sidebar ul.menu-categories {
    min-height: calc(100vh - 900px); ------------------ added
    overflow: visible;
}

and add margin-left (according to sidebar width).

#content {
    width: 50%;
    flex-grow: 8;
    margin-top: 59px;
    margin-bottom: 67px;
    margin-left: 255px;     ------------------ added
}

At last you have to add mCustomScrollbar js code

$("ul.menu-categories").mCustomScrollbar({theme:"minimal",scrollInertia:1e3})

Hope this helps

Kindest Regards,

Design Reset Team

I have done everything you mentioned above but when I am adding the js code on the page <script src=”plugins/scrollbar/jquery.mCustomScrollbar.concat.min.js”></script> <script> $(document).ready(function() { $(“ul.menu-categories”).mCustomScrollbar({theme:”minimal”}); }); </script>

the vertical scroll shows on the sidebar panel but not scrolling.

Dear princegoel072,

Kindly check the following :-

1. Check the console for error.

2. Check whether the height is mentioned at the right place.

If the issue still the same kindly provide us a screenshot or a working example.

Hope this helps

Kindest Regards,

Design Reset Team

As you mentioned I have added the given code in the file and line mentioned after them In File Structure.css at line 539 .sidebar-wrapper { width: 255px; position: fixed; } at line 586 #sidebar ul.menu-categories { padding: 5px 8px; min-height: calc(100vh – 900px); overflow: visible; } In File main.css at line 275 #content { width: 50%; flex-grow: 8; margin-top: 59px; margin-bottom: 67px; margin-left: 255px; } In File accounting_dashboard.html for mCustomScrollbar JsCode added on the page level I am testing <script src=”plugins/scrollbar/jquery.mCustomScrollbar.concat.min.js”></script> <script src=”bootstrap/js/popper.min.js”></script> <script src=”bootstrap/js/bootstrap.min.js”></script> <script src=”assets/js/app.js”></script> <script> $(document).ready(function() { App.init(); $(“ul.menu-categories”).mCustomScrollbar({theme:”minimal”,scrollInertia:1e3}); }); </script> <script src=”assets/js/custom.js”></script>

Also there is no option to attach the image here

Dear princegoel072,

Kindly attach the image to the link mentioned below.

- https://imgur.com/

Kindest Regards,

Design Reset Team

https://drive.google.com/file/d/1CWtHCncUOJl8nAWa2Mc87pwiroMl1cmR/view?usp=sharing

Dear princegoel072

First of all open app.js

Add the code mentioned below inside app.js.

var desktopFunctions = {
    activateScroll: function() {
        $("ul.menu-categories").mCustomScrollbar({
            theme: "minimal",
            scrollInertia: 1000
        });
    },
}

Remember you should have to apply the code below mobileFunction. So it should be like

----------------
Complete Code
----------------

var mobileFunctions = {
    activateScroll: function() {
        $("#sidebar").mCustomScrollbar({
            theme: "minimal",
            scrollInertia: 1000
        });
    },
}

var desktopFunctions = {
    activateScroll: function() {
        $("ul.menu-categories").mCustomScrollbar({
            theme: "minimal",
            scrollInertia: 1000
        });
    },
}

Now,

Take trigger the code inside _desktopResolution => onRefresh and onResize

var _desktopResolution = {
        onRefresh: function() {
            var windowWidth = window.innerWidth;
            if ( windowWidth > MediaSize.md ) {
                toggleFunction.deactivateScroll();
                desktopFunctions.activateScroll();      ----------> Tigger Here
                categoryScroll.default();
                // console.log('On Desktop Refresh');
            }
        },
        onResize: function() {
            $(window).on('resize', function(event) {
                event.preventDefault();
                var windowWidth = window.innerWidth;
                if ( windowWidth > MediaSize.md ) {
                    $('footer .footer-section-1').removeClass('f-close');
                    toggleFunction.deactivateScroll();
                    desktopFunctions.activateScroll();         ----------> Tigger Here
                    // console.log('On Desktop Resize');
                }
            });
        }
    }

As you have triggerd the code now you need to create a deactivateScroll code to be deactivated on mobile

So for that you have to update desktopFunctions code. Below is the updated snippet

var desktopFunctions = {
    activateScroll: function() {
        $("ul.menu-categories").mCustomScrollbar({
            theme: "minimal",
            scrollInertia: 1000
        });
    },

    // Updated deactivateScroll

    deactivateScroll: function() {
        $('ul.menu-categories').mCustomScrollbar("destroy");
    },
}

Now trigger the function function inside _mobileResolution => onRefresh and onResize

var _mobileResolution = {
        onRefresh: function() {
            var windowWidth = window.innerWidth;
            if ( windowWidth <= MediaSize.md ) {
                // console.log('On Mobile Refresh');
                categoryScroll.mobile()
                mobileFunctions.activateScroll();
                desktopFunctions.deactivateScroll();    ------> Triggered Here
            }
        },
        onResize: function() {
            $(window).on('resize', function(event) {
                event.preventDefault();
                var windowWidth = window.innerWidth;
                if ( windowWidth <= MediaSize.md ) {
                    // console.log(MediaSize.md);
                    mobileFunctions.activateScroll();
                    desktopFunctions.deactivateScroll();    ------> Triggered Here
                    // console.log('On Mobile Resize');
                }
            });
        }
    }

Note:- The css you have applied earlier, Kindly do not remove them.

Hope this helps

Kindest Regards,

Design Reset Team

No success even after changing the code as directed by you. The files with the replaced code and a video of the testing page also attached. Pl. visit link to verify file. https://drive.google.com/drive/folders/1erj7P_-kRSDg1YZGXOIn-SPF01iMdtrE?usp=sharing

Dear princegoel072,

All the CSS and JS code that we have provided earlier works fine.

You just need to make an update in CSS [#sidebar ul.menu-categories] min-height to height.

sidebar ul.menu-categories {

height: calc(100vh – 78px); }

Hope this helps

Kindest Regards,

Design Reset Team

The above code work perfectly for the big screen but Sorry to inform you that when I test the mobile response the side bar is not scrolling.