Collapsed Bootstrap Navbar на мобильном

Question

Как исправить overflow-y недвижимости в .navbar-collapse.in класса? Navbar в коллапсе в верхней части страницы:

И я хотел бы показать, что ржали like this

В Bootstrap, есть два свойства

.navbar-collapse.in { 
    overflow-y: auto; 
} 
.collapse.in { 
    display: block; 
} 

Но это все еще сверху:/

Вот HTML:

<div class="row"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       </button> 
       <a id="logo" class="navbar-brand" href="index.php"> 
       <img src="images/logo_2.png" class="img-responsive" alt=""> 
       </a> 

       <!-- Collect the nav links, forms, and other content for toggling --> 
       <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
        <ul class="nav navbar-nav"> 
         <li class="active"><a href="index.php">Link 1 <span class="sr-only">(current)</span></a></li> 
         <li><a href="">Link 2</a></li> 
         <li><a href="">Link 3</a></li> 
         <li><a href="">Link 4</a></li> 
         <li><a href="">Link 5</a></li> 
         <li><a href=""></a></li> 
        </ul>    
        <form class="navbar-form" role="search" action="" id="cse-search-box"> 
        <div class="form-group"> 
         <div class="input-group"> 
          <input type="hidden" name="cx" value="" /> 
          <input type="hidden" name="cof" value="" /> 
          <input type="hidden" name="ie" value="" /> 
          <input type="text" name="q" class="" /> 
          <span class="input-group-btn"> 
           <button type="submit" class="btn btn-warning"><span class="glyphicon glyphicon-search"></span></button> 
          </span> 
         </div> 
        </div> 
       </form> 
       <script type="text/javascript" src=""></script> 
      </div><!-- /.navbar-collapse --> 
      </div><!-- navbar-header --> 
      </div> <!-- row --> 

и CSS:

/* Portrait & landscape phone */ 
@media (min-width: 768px) and (max-width: 1200px) { 
    /* line 100, ../sass/layout/_main.scss */ 
    ul.list-unstyled { 
    width: 100%; 
    text-align: center; 
    } 
    /* line 105, ../sass/layout/_main.scss */ 
    ul.list-unstyled li { 
    display: inline-block; 
    } 

    /* line 110, ../sass/layout/_main.scss */ 
    .navbar-header { 
    float: none; 
    } 

    /* line 113, ../sass/layout/_main.scss */ 
    .navbar-left, .navbar-right { 
    float: none !important; 
    } 

    /* line 116, ../sass/layout/_main.scss */ 
    .navbar-toggle { 
    display: block; 
    } 

    /* line 119, ../sass/layout/_main.scss */ 
    .navbar-collapse { 
    border-top: 1px solid transparent; 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); 
    } 

    /* line 123, ../sass/layout/_main.scss */ 
    .navbar-fixed-top { 
    top: 0; 
    border-width: 0 0 1px; 
    } 

    /* line 127, ../sass/layout/_main.scss */ 
    .navbar-collapse.collapse { 
    display: none !important; 
    } 

    /* line 130, ../sass/layout/_main.scss */ 
    .navbar-nav { 
    float: none !important; 
    margin-top: 50px; 
    } 

    /* line 134, ../sass/layout/_main.scss */ 
    .navbar-nav > li { 
    float: none; 
    } 

    /* line 137, ../sass/layout/_main.scss */ 
    .navbar-nav > li > a { 
    padding-top: 10px; 
    padding-bottom: 10px; 
    } 

    /* line 141, ../sass/layout/_main.scss */ 
    .collapse.in { 
    display: block !important; 
    } 
} 
/*@media (min-width: 480px) and (max-width: 768px) { 
    /* rules for mobile horizontal (480 > 768) 
    /* line 149, ../sass/layout/_main.scss */ 
    ul.list-unstyled { 
    width: 100%; 
    text-align: center; 
    } 
    /* line 154, ../sass/layout/_main.scss */ 
    ul.list-unstyled li { 
    display: inline-block; 
    } 

    /* line 160, ../sass/layout/_main.scss */ 
    .alpha h4 { 
    font-size: 1.5rem; 
    } 

    /* line 165, ../sass/layout/_main.scss */ 
    .btn-down .down { 
    font-size: 1rem; 
    } 

    /* line 170, ../sass/layout/_main.scss */ 
    h1 { 
    font-size: 1.5em; 
    line-height: 1.25em; 
    } 

    /* line 174, ../sass/layout/_main.scss */ 
    .navbar-collapse.in { 
    overflow-y: visible; 
    } 
} 
@media (max-width: 480px) { 
    /* line 181, ../sass/layout/_main.scss */ 
    .visible-xs { 
    font-size: 2rem; 
    text-align: center; 
    padding: 0; 
    } 
    /* line 185, ../sass/layout/_main.scss */ 
    .visible-xs li { 
    display: inline-block; 
    margin-right: 1rem; 
    width: 3rem; 
    height: 3rem; 
    } 
    line 192, ../sass/layout/_main.scss 
    .visible-xs .fa-windows { 
    color: #337AB7; 
    } 
    /* line 195, ../sass/layout/_main.scss */ 
    .visible-xs .fa-apple { 
    color: #212121; 
    } 
    /* line 198, ../sass/layout/_main.scss */ 
    .visible-xs .fa-download { 
    color: #F0AD4E; 
    } 
    /* line 201, ../sass/layout/_main.scss */ 
    .visible-xs .fa-search { 
    color: #5BC0DE; 
    } 

    /* line 206, ../sass/layout/_main.scss */ 
    h4 { 
    font-size: 1.5rem; 
    } 

    /* line 210, ../sass/layout/_main.scss */ 
    .btn-down .down { 
    font-size: 1rem; 
    } 

    /* line 215, ../sass/layout/_main.scss */ 
    h1 { 
    font-size: 1.5em; 
    line-height: 1.25em; 
    } 

    /* line 220, ../sass/layout/_main.scss */ 
    .navbar-nav { 
    margin-top: 0; 
    } 

    /* line 223, ../sass/layout/_main.scss */ 
    .navbar-collapse.in { 
    overflow-y: visible; 
    } 

    /* line 226, ../sass/layout/_main.scss */ 
    .navbar-text { 
    margin-left: 0; 
    } 

    /* line 230, ../sass/layout/_main.scss */ 
    .l-header .navbar-brand > img { 
    margin: -10px; 
    } 
} 
@media (max-width: 320px) { 
    /* line 237, ../sass/layout/_main.scss */ 
    .navbar-text { 
    font-size: 1rem; 
    } 
} 

Answer 1

Вы пропустили добавить навигационную метку. http://getbootstrap.com/components/#navbar