Bootstrap dropdown menu in small devices

Question

I have a dropdown list (with 15-20 items) on navbar. All the dropdown items are not visible on mobile phone.

I have tried below inside bootstrap.css:

.navbar-collapse.in {
        overflow-y: visible;
        overflow-y: auto;          
    }

It's not working.(Bootstrap v3.0.3)

HTML:

        <div class="navbar navbar-default" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>                        
                </div>
                <div class="navbar-collapse collapse" id="templatemo-nav-bar">                        
                    <div class="navbar-left" style="width: 98%; float: left;">                            
                        <ul class="nav navbar-nav navbar-right" id="dropdownState">                                
                            <li class="dropdown" style="margin-top: 4px; background-color: #5e8fed; color: #fff; border-top: 1px solid #02215b; border-bottom: 1px solid #02215b;">                                    
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-university" aria-hidden="true"></i>&nbsp;StateName <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                     //loop here
                                   <li><a data-id="@item.Value" class="lnkChangeState" href="javascript:;"><i class="fa fa-check" aria-hidden="true"></i>&nbsp;@item.Text</a></li> 
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>                 
            </div>              
        </div>          
    </div>

How can I make it working on small devices as well?

Thanks

Answer 1

I have made it to work. Change the following styles:

.navbar-collapse.in {
    overflow: hidden; 
    max-height: none !important; 
    height: auto !important;
}

to

.navbar-collapse.in {
    /* overflow: hidden; */
    /* max-height: none !important; */
    height: auto !important;
}