Bootstrap dropdown hides behind in smaller screens

Question

JSfiddle

The above fiddle works just fine in a regular screen size. However if I try it in a smaller screen size (try resizing the browser), the dropdown hides behind the menu and instead gives a scroll bar. How do I prevent this? How to have the drodown outside the menu bar and have it completely visible in a smaller screen too?

Already tried : link1 , link2

HTML

<nav class="navbar navbar-default">
<div id="menu" class="container-fluid">
    <div class="navbar-header">
        <button class="navbar-toggle" aria-expanded="true" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" type="button">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="">TRILLSOFT</a>
    </div>
    <div id="bs-example-navbar-collapse-1" class="navbar-collapse collapse in" aria-expanded="true" style="">
        <ul class="nav nav-pills">
            <li class="active">
                <a href="#TAPL" data-toggle="tab" aria-expanded="true">TAPL</a>
            </li>
            <li class="">
                <a href="#productorderedit" data-toggle="tab" aria-expanded="false">productorderedit</a>
            </li>
        </ul>
        <div class="tab-content">
            <div id="TAPL" class="tab-pane fade active in">
                <li class="dropdown open">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="true">
                        Project Orders
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="#">Project Order Lookup</a>
                        </li>
                        <li>
                            <a href="#">Project Order Lookup of my Active projects</a>
                        </li>
                    </ul>
                </li>
            </div>
            <div id="productorderedit" class="tab-pane fade">
                <li>
                    <a href="#">Release</a>
                </li>
                <li>
                    <a href="#">FSC Labels</a>
                </li>
                <li>
                    <a href="#">Unrelease Selected Items</a>
                </li>
            </div>
        </div>
    </div>
    <ul class="nav nav-pills navbar-right">
        <li>
            <div>
                Logged in as dshah |
                <a href="/app_dev.php/logout"> Logout</a>
            </div>
        </li>
    </ul>
</div>

Answer 1

overflow-y is set as auto by default which provides a scrolling bar when you have excessive content.

 .navbar-collapse.in { overflow-y: visible !important; /* Avoid !important, used it here only for priority */ } 

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> <nav class="navbar navbar-default"> <div id="menu" class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle" aria-expanded="true" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" type="button"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="">TRILLSOFT</a> </div> <div id="bs-example-navbar-collapse-1" class="navbar-collapse collapse in" aria-expanded="true" style=""> <ul class="nav nav-pills"> <li class="active"> <a href="#TAPL" data-toggle="tab" aria-expanded="true">TAPL</a> </li> <li class=""> <a href="#productorderedit" data-toggle="tab" aria-expanded="false">productorderedit</a> </li> </ul> <div class="tab-content"> <div id="TAPL" class="tab-pane fade active in"> <li class="dropdown open"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="true"> Project Orders <span class="caret"></span> </a> <ul class="dropdown-menu"> <li> <a href="#">Project Order Lookup</a> </li> <li> <a href="#">Project Order Lookup of my Active projects</a> </li> </ul> </li> </div> <div id="productorderedit" class="tab-pane fade"> <li> <a href="#">Release</a> </li> <li> <a href="#">FSC Labels</a> </li> <li> <a href="#">Unrelease Selected Items</a> </li> </div> </div> </div> <ul class="nav nav-pills navbar-right"> <li> <div> Logged in as dshah | <a href="/app_dev.php/logout"> Logout</a> </div> </li> </ul> </div> </nav>