html - Twitter bootstrap 3 navbar dropdown doesn't show all elements if screen is small, old browser

Question

I have a fixed navbar in my Twitter Bootstrap 3 website. This navbar has dropdown toggle buttons in left and right. Each dropdown has 13 elements inside. In mobile devices: - If screen height is bigger then 13 element size everything good. - If screen height is small then first 8-9 elements are shown, other can't be shown. Because no vertical scrollbar appears. Only scrollbar is whole page's scrollbar. Whole page scrollbar scrolls the page, but navbar dropdown elements can't bew shown.

How can I show the vertical scrollbar, or why this scrollbar can't be show ?
I'm suspicious about old browsers. I get this problem in Android 2.3.3 browsers. Maybe there exists a non support of some HTML5 feature. I didn't check in other small screen devices.

jsFiddle

The red arrowed vertical scrollbar doesn't appear if device height is small:

<nav class="navbar navbar-inverse navbar-fixed-top visible-xs" role="navigation">
    <div class="navbar-header" style="text-align:center;">
        <button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target=".navbar-part2"> <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

        </button>
        <button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target=".navbar-part3" style="padding: 3px 15px;">
            <img src="http://www.wdc.com/Global/images/icons/icon_supporthelp.gif" width="24" height="24" alt="aaaa">
        </button>
        <div style="padding-top: 15px;"> <a href="/page0" title="aaa" style="color:#ffffff;margin-top:40px;">Example.com</a>

        </div>
    </div>
    <div class="collapse navbar-collapse navbar-part2">
        <ul class="nav navbar-nav">
            <li><a href="/page1">page 1</a></li>
            <li><a href="/page2">page 2</a></li>
            <li><a href="/page1">page 3</a></li>
            <li><a href="/page2">page 4</a></li>
            <li><a href="/page1">page 5</a></li>
            <li><a href="/page2">page 6</a></li>
            <li><a href="/page1">page 7</a></li>
            <li><a href="/page2">page 8</a></li>
            <li><a href="/page1">page 9</a></li>
            <li><a href="/page2">page 10</a></li>
            <li><a href="/page2">page 11</a></li>
            <li><a href="/page2">page 12</a></li>
            <li><a href="/page2">page 13</a></li>
        </ul>
    </div>
    <div class="collapse navbar-collapse navbar-part3">
        <ul class="nav navbar-nav">
            <li><a href="/page1">page 1</a></li>
            <li><a href="/page2">page 2</a></li>
            <li><a href="/page1">page 3</a></li>
            <li><a href="/page2">page 4</a></li>
            <li><a href="/page1">page 5</a></li>
            <li><a href="/page2">page 6</a></li>
            <li><a href="/page1">page 7</a></li>
            <li><a href="/page2">page 8</a></li>
            <li><a href="/page1">page 9</a></li>
            <li><a href="/page2">page 10</a></li>
            <li><a href="/page2">page 11</a></li>
            <li><a href="/page2">page 12</a></li>
            <li><a href="/page2">page 13</a></li>
        </ul>
    </div>
</nav>
    <div>
    My page contents..
    </div>

Answer 1

Hmmm okay I'm going to take a swing let me know if it's wrong so I can get what you want but if you just add:

.navbar-collapse{
    max-height: 100%;
}

The collapsed navbar will go the full width so they will all show. From that point it would just be a matter of adjusting the font if you want them all on the same screen or adjusting the line-height. Anyway here is a fiddle for an example give me some feedback so I can help.

http://jsfiddle.net/kwzt3/