引导导航栏无法在平板电脑上正确显示

Question

I have a little problem, i got bootstrap navbar set up, but when i resize it to the tablet width, menu escapes the navbar and gets into content like shown here:

http://oi57.tinypic.com/2uykv9g.jpg "see the problem"

Is the menu too wide ? Any help how to fix this would be greatly appriciated.

Code here:

<div class="navbar navbar-fixed-top">
         <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="fa fa-bars color-white"></span>
                </button>

                    <a class="navbar-brand" href="index.html" ><img class="img-responsive" src="images/new.jpg"></a>
            </div>
            <div class="navbar-collapse collapse">



            <ul class="nav navbar-nav" >
                    <li class="active"><a href="#section-main"><i class="fa fa-home"></i></a></li>
                    <li><a href="#section-pakiety">Packages</a></li>
                    <li><a href="#section-works">Examples of webpages</a></li>
                    <li><a href="#section-about">Our Services</a></li>                     
                    <li><a href="#section-korzysci">Benefits</a></li>
                    <li><a href="#section-ref">References</a></li>
                    <li><a href="#section-contact">Contact </a></li>
                </ul>



            </div><!--/.navbar-collapse -->
        </div>
    </div>

Answer 1

Ok i fixed it, so in case somebody else is having that problem, all i did was scale down the logo (which was partially the problem) to 80% on devices smaller than 992px, gave it an absolute positioning etc, here is the css:

@navbar-height: 150px;
@navbar-brand-vpadding: 10px;

.navbar-brand img {
  height: @navbar-height - @navbar-brand-vpadding * 2;
  position: absolute;
  top: @navbar-brand-vpadding;
}
@media (max-width: 992px) {
  .make-custom-class-here {
    width:201px;
    height:41px;
  }
}