Ширина меню начальной загрузки

Question

У меня есть меню Bootstrap, но у меня есть проблема, когда я хочу изменить ширину экрана.

Например, для 767 < width of screen < 950, у меня есть проблема.

Это проблема в ul class="nav", но я не могу найти проблему и решить ее.

.static-navbar { 
 
     float: right; 
 
    } 
 
    
 
    @media (min-width: 768px){ 
 
    \t .navbar-collapse.collapse { 
 
    \t \t display: block!important; 
 
    \t \t height: auto!important; 
 
    \t \t padding-bottom: 0; 
 
    \t \t overflow: visible!important; 
 
    \t } 
 
    } 
 
    
 
    @media (min-width: 768px){ 
 
    .navbar-collapse { 
 
     width: auto; 
 
     border-top: 0; 
 
     -webkit-box-shadow: none; 
 
     box-shadow: none; 
 
    } 
 
    .navbar-collapse.collapse { 
 
     display: block!important; 
 
     height: auto!important; 
 
     padding-bottom: 0; 
 
     overflow: visible!important; 
 
    } 
 
    } 
 
    
 
    .navbar-nav li.drop { 
 
     position: relative; 
 
    } 
 
    
 
    @media (min-width: 768px){ 
 
    .navbar-nav>li { 
 
     float: left; 
 
    } 
 
    } 
 
    
 
    .nav>li { 
 
     position: relative; 
 
     display: block; 
 
    } 
 
    
 
    .navbar-nav > li > a { 
 
     padding: 40px 15px 38px; 
 
    } 
 
    
 
    .navbar-nav li.drop ul.dropdown { 
 
     margin: 0; 
 
     padding: 10px; 
 
     position: absolute; 
 
     top: 100%; 
 
     left: 0; 
 
     width: 250px; 
 
    \t }

<nav class="navbar navbar-default" role="navigation"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-sm-2"> 
 
     <div class="navbar-header"> 
 
      Logo 
 
     </div> 
 
     </div> 
 
     <div class="col-sm-10 static-navbar"> 
 
     <div class="collapse navbar-collapse" id="navbar-collapse"> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
      <li class="drop"> 
 
       <a class="active" href="index.html">Home</a> 
 
       <ul class="dropdown"> 
 
       <li> 
 
        <a href="index.html">Lorem Ipsum</a> 
 
       </li> 
 
       </ul> 
 
      </li> 
 
      <li class="drop"> 
 
       <a class="active" href="index.html">Home</a> 
 
       <ul class="dropdown"> 
 
       <li> 
 
        <a href="index.html">Lorem Ipsum</a> 
 
       </li> 
 
       </ul> 
 
      </li> 
 
      </ul> 
 
     </div><!-- /.navbar-collapse --> 
 
     </div> 
 
    </div> 
 
    </div><!-- /.container --> 
 
</nav>

Answer 1

Я думаю, что проблемы в .collapse. на экране < 767. Используется класс Boostrap collapse ниже css riles.

.collapse{ 
display:none; 
} 

Таким образом, Ваш UL Not Display и вы не используйте кнопку сворачивания в вашем HTML.

Попробуйте что-нибудь подобное.

<!-- Latest compiled and minified CSS --> 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
\t <!-- jQuery library --> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
\t <!-- Latest compiled JavaScript --> 
 
\t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<nav class="navbar navbar-default" role="navigation"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-sm-2"> 
 
       <div class="navbar-header"> 
 
        Logo 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" aria-controls="navbar"> 
 
       <span class="sr-only">Toggle navigation</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 
       </div> 
 
      </div> 
 
      <div class="col-sm-10 static-navbar"> 
 
       <div class="collapse navbar-collapse" id="navbar-collapse"> 
 
        <ul class="nav navbar-nav navbar-right"> 
 
         <li class="drop"><a class="active" href="index.html">Home</a> 
 
          <ul class="dropdown"> 
 
           <li><a href="index.html">Lorem Ipsum</a></li> 
 
          </ul> 
 
         </li> 
 
         <li class="drop"><a class="active" href="index.html">Home</a> 
 
          <ul class="dropdown"> 
 
           <li><a href="index.html">Lorem Ipsum</a></li> 
 
          </ul> 
 
         </li> 
 
        </ul> 
 
       </div><!-- /.navbar-collapse --> 
 
      </div> 
 
     </div> 
 
    </div><!-- /.container --> 
 
</nav>