Topic: sidenav scrollbar not working

Kurt free asked 4 years ago

There is no Scrollbar on Sidenav on smartphone screens.In SourceCode i see only ps and not ps--active-y in ul-class: custom-scrollbar navbar-light blue-grey lighten-5 side-nav-light ps

The same symptom shows this MDB Example:

A running example is this:

My init code is like this:$('.button-collapse').sideNav({ edge: 'right', // Choose the horizontal origin menuWidth: 240, // Width for sidenav showOverlay: false, // Display overlay showCloseButton: false // Append close button into sidenav }); var sideNavScrollbar = document.querySelector('.custom-scrollbar'); var ps = new PerfectScrollbar(sideNavScrollbar);

Kurt free answered 4 years ago

ok, i could solve it with an idea from Hafid 75 (

i changed HTML to <ul class="custom-scrollbar" style="height:100%;overflow-y:auto;"> in addition i added to CSS: #sidenav-overlay {z-index:1030;}

so i can click everywhere on the screen to close sidenav


Mateusz Łubianka staff commented 4 years ago

So does it work fine now?


Mateusz Łubianka staff answered 4 years ago

Hi @Kurt,

I chcked sidenav in MDB main page and there scrollbar works fine. I also checked snippet and scrollbar works. Is there a problem I can't see?

enter image description here


Kurt free commented 4 years ago

Would you like have a look at please Best,

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.14.0
  • Device: Smartphone
  • Browser: Safari
  • OS: OS 13.3.1
  • Provided sample code: No
  • Provided link: Yes