How do I fix a mobile menu that is too long to scroll and doesn't show all the items on the menu

Question

This is my menu.

It's too long that I cant scroll down and view the other list items.

The nav bar has a "position: fixed;" attribute.

I tried using "overflow-y: scroll;" on the list or trying out attributes from this post: Collapsible menu is too long for mobile landscape that didnt help my situation.

This is my html:

        <div class="list">    
        <h2 id="cat-header"> ALL CATEGORIES</h2>
            <ul class="sports">
                <li> <a href="#" > Baseball </a></li>
                <li> 
                    <a href="#" > Basketball </a>
                    <ul class="sports2">
                        <li><a href="#" class="selected">NBA</a></li>
                        <li><a href="#" class="selected">Euroleague</a></li>
                        <li><a href="#" class="selected">German basketball</a></li>
                    </ul>
                </li>
                <li> <a href="#" > Boxing </a></li>
                <li> <a href="#" > Cricket </a></li>
                <li> <a href="#" > Darts </a></li>
                <li> <a href="#" > Football </a></li>
                <li> <a href="#" > Golf </a></li>
                <li> <a href="#" > Hockey</a></li>
                <li> <a href="#" > Martial Arts </a></li>
                <li> <a href="#" > Rugby </a></li>
                <li> <a href="#" > Snooker </a></li>
                <li> <a href="#" > Tennis </a></li>
                <li> <a href="#" > Lacrosse </a></li>
                <li> <a href="#" > Softball </a></li>
                <li> <a href="#" > Olympics </a></li>
            </ul>
        </div> 

and this is my CSS relevant only to mobile:

/******************/
/*** MOBILE ******/
/****************/

.header_space{
    display: none;
    height: 90px;
}

#mob-menu-btn{
    display: none;
}



/*****************************************************************/

@media (max-width: 604px)  {

    .main{
        width: 100%;
        overflow: hidden;
    }

    .sidebar{
        float: initial;
        width: 100%;
        padding: 0;
        background-color: red;
        height: 100px;
        position: fixed;
        z-index: 100;
    }

    .header_space{
        display: inherit;
        height: 78px;
    }

    .sports{
        display: none;
        padding: 0 ;
    }

    .sports {
        background-color: #fff;
        margin: 0;
        width:100%;
    }

.list{
        width: 100%;
        overflow-y: scroll;
    }

    .sports li{
        list-style-image:none;
        list-style-type: none;
        border-bottom: 2px solid #eeeeee;
        margin-bottom: 0px; 
        margin-left: 0px; 
        padding-top: 15px;
        padding-bottom: 15px;
        padding-left: 10px;
        width:100%;
        font-family: "UScoreRGK";

    }

    .sports2{
        display: none;
    }

    #mob-menu-btn{
        display: inherit;
        cursor: pointer;
        margin-top: 2px
    }


}

Answer 1

I used a class that makes the body of the page "position: fixed;"

using jQuery:

$('#mob-menu-btn').click(function(){

var isHidden = $('.sports').is(':visible');

    if (isHidden){
        $( "body" ).removeClass( "makeFixed" );
    }else{
        $( "body" ).addClass( "makeFixed" );
    }
    $('.sports').slideToggle("slow");
})  

Answer 2

It looks like you just need to set a height or max-height of 100% on your .list see generic example below:

body {
  height: 1000px;
}
.fixedSideNav {
  max-height: 100%;
  position: fixed;
  overflow-y: scroll;
}

<nav class="fixedSideNav">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
  </ul>

</nav>