CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Pawan
Pawan

Reputation: 1744

Bootstrap dropdown menu in small devices

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;          
    }

enter image description here

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

Upvotes: 3

Views: 2805

Answers (2)

Aakash Thakur
Aakash Thakur

Reputation: 3895

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;
}

enter image description here

enter image description here

Upvotes: 1

Nathaniel Flick
Nathaniel Flick

Reputation: 2963

I'm updating my answer! It helped to see your actual code.

Since your menu drop down is fixed position and overflow hidden you'll never see the entire menu if it needs more screen room than it has.

You need to update this class with the following attributes: 

.navbar-collapse.in {
overflow: scroll;

}

and do not call these attributes: 

max-height: none !important;
height: auto !important;

This makes the drop down menu scrollable. Adjust the height with media queries if you like, but it will work now.

Upvotes: 0

Related Questions