Problems side-menu bar

Question

I am having problem with my side-menu bar, because it is not allowing scroll down on the menu when the app installed on your cell phone. In the emulator it only allows me to scroll with the mouse bolinha (scroll). The code of my menu goes below:

           <div class="inner-element uib_w_43 uib_sidebar leftbar bar-bg thumb-bg bar-gutter menu-side-bar swipe" data-uib="layout/left_sidebar" data-ver="1" data-anim="{'style':'overlap', 'v':270, 'side':'left', 'dur':500}">

        <div class="sidebar-content content-area ">
            <div class="header-side-menu">
                <img id="imagem-logado">
                <img id="imagemBorda-logado" src="images/borda_foto.png">
                <div class="name-logado">
                    <h10></h10>
                </div>
            </div>
            <!-- ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
            <div class="content-side-menu">
                <div class="contat-titulo-side-menu">Participantes</div>
                <ul>
                    <li class="content-content-side-menu" id="cadPart"> <i class="ion ion-person-add"> </i> Novo participante</li>
                    <li class="content-content-side-menu" id="lsPart"> <i class="ion ion-clipboard"> </i> Lista participantes</li>
                </ul>
            </div>
            <!-- ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
            <div class="content-side-menu">
                <div class="contat-titulo-side-menu">Reuniões</div>
                <ul>
                    <li class="content-content-side-menu" id="cadReu"> <i class="ion ion-plus-circled"> </i> Nova reunião</li>
                    <li class="content-content-side-menu" id="lsReu"> <i class="ion ion-clipboard"> </i> Historico de reuniões</li>
                </ul>
            </div>
            <!-- ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
            <div class="content-side-menu">
                <div class="contat-titulo-side-menu">Sincronismo</div>
                <ul>
                    <li class="content-content-side-menu" id="btnBuscarAtt"> <i class="ion ion-upload"> </i> Buscar atualizações</li>
                    <li class="content-content-side-menu" id="histSincr"> <i class="ion ion-clipboard"> </i> Log</li>
                </ul>
            </div>
            <!-- ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
            <div class="content-side-menu">
                <div class="contat-titulo-side-menu">Opções</div>
                <ul>
                    <li class="content-content-side-menu" id="btn_OPCOES_PROGRAM"> <i class="ion ion-android-settings"> </i> Opções</li>
                    <li class="content-content-side-menu" id="btnRenicializar"> <i class="ion ion-nuclear"> </i> Reinicializar aplicação</li>
                    <li class="content-content-side-menu" id="btnInformacoes"> <i class="ion ion-information-circled"> </i> Sobre</li>
                </ul>
                <ul>
                    <li class="content-content-side-menu" id="btnSair"> <i class="ion ion-log-out"> </i> Sair</li>
                </ul>
            </div>
            <div style="margin-bottom: 80px;"></div>
        </div>
    </div>

here my css:

.menu-side-bar {
  position: fixed;
  z-index: 999;
  overflow: auto;

  .header-side-menu{
    text-align: center;
    background-color: rgb(236, 240, 241);
    height: 235px;
    vertical-align: center;
  }
  img#imagem-logado{
   // position: fixed;
    height: 150px;
    //width: 100px;
    //margin-left: 35px;
    margin-top: 53px;
  }
  img#imagemBorda-logado{
    position: relative;
    margin-top: -199px;
    height: 180px;
    //left: 0;
    //border-color: red;
  }
  .name-logado{
    position: relative;
    margin-top: -20px;
    clear: both;
    z-index: 999;
   // float: bottom;
    text-align: center;
    h10{
      font-size: 7vw;
      font-family: Lato;
      color: rgb(127, 140, 141);
     // position: absolute;

    }
  }
  .content-side-menu{
    .contat-titulo-side-menu{
      background-color: rgb(52, 73, 94);
      font-size: 18px;
      text-align: center;
      font-family: TAHOMA;
      color: #ecf0f1;
      height: 25px;
      padding-top: 3px;
    }
    .content-content-side-menu{
      font-family: VERDANA;
      font-size: 17px;
      color: white;
      margin-top: 10px;
      margin-bottom: 10px;
      margin-left: 15px;
      cursor: pointer;
    }
  }

}

I serviced the entire CSS but did not encounter anything. Why is this happening?

Answer 1

You could try replacing the code at the top with

.menu-side-bar {
  position: fixed;
  z-index: 999;
  overflow: scroll;

I'm struggling to understand what you want, to be honest.

Edit: Try this instead.

.menu-side-bar {
 overflow-x: auto;
 overflow-y: scroll;
 white-space: nowrap;
 -webkit-overflow-scrolling: touch;