twitter bootstrap nav : need to create scroll bar when not collapsing

Question

I use twitter bootstrap-rtl version. I want my navigation bar not to collapse so i don't load the bootstrap-responsive.css file.

The problem is when the window is thin the menu is cutted and scrolling to the side does not reveal it!

here is some sample code:

<div class="navbar navbar-fixed-top"  >

      <div class="navbar-inner"  style="min-width: 1100px;">
        <div class="container visible-phone" style="height:60px;min-width: 1100px;">




            <ul class="nav" style="margin-top:10px;min-width: 1000px;">


                            <li>

                                <a href="/dish/all_dishes/">

                                <i class="icon-large icon-fire"></i>
                                link
                                </a>
                            </li>

                            <li>

                                <a href="/cook/all_cooks/">

                                <i class="icon-large icon-group"></i>
                                link
                                </a>
                            </li>

                            <li>

                                <a href="/about/">
                                <i class="icon-large icon-info-sign"></i>

                                link
                                </a>
                            </li>

                            <li>

                                <a href="/q_a/">
                                <i class="icon-large icon-question-sign"></i>

                                link
                                </a>
                            </li>


                            <li>

                                <a href="/contact/">    
                                <i class="icon-large icon-envelope"></i>                                    
                                link
                                </a>
                            </li>




            </ul>





        </div>


      </div>
    </div>

here is the example: http://jsfiddle.net/leonidbl91/Rd6FP/1/

Any help will be appriciated!

Answer 1

Essentially it's because you have set the position of the nav bar to be fixed, and fixed elements don't move when you scroll. You can see a similar question here: How to make position:fixed div scroll horizontally