Bootstrap меню гамбургер нав (полный экран)

Question

Вот код на boot ply:

То, что я хочу сделать, это вместо меню гамбургер появляться при изменении размера окна, я хочу полную версию экрана для меню , что имеет тот же эффект, но для немобильных экранов. Кажется, что меню гамбургеров активируется только на мобильных устройствах. Как я могу это сделать? Спасибо

Answer 1

Вы должны использовать медиа-запросы и изменить значения по умолчанию, чтобы открыть класс navbar-toggle в большем окне просмотра. Измените ширину запроса на медиа-контент до того, что вам нужно.

.navbar.custom-navbar .fa { 
 
    font-size: 25px 
 
} 
 
@media (max-width: 2500px) { 
 
    .custom-navbar .navbar-header { 
 
    float: none; 
 
    } 
 
    .custom-navbar .navbar-left, 
 
    .custom-navbar .navbar-right { 
 
    float: none !important; 
 
    } 
 
    .custom-navbar .navbar-toggle { 
 
    display: block; 
 
    } 
 
    .custom-navbar .navbar-collapse { 
 
    border-top: 1px solid transparent; 
 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); 
 
    } 
 
    .custom-navbar.navbar-fixed-top { 
 
    top: 0; 
 
    border-width: 0 0 1px; 
 
    } 
 
    .custom-navbar .navbar-collapse.collapse { 
 
    display: none!important; 
 
    } 
 
    .custom-navbar .navbar-nav { 
 
    float: none!important; 
 
    margin-top: 7.5px; 
 
    } 
 
    .custom-navbar .navbar-nav>li { 
 
    float: none; 
 
    } 
 
    .custom-navbar .navbar-nav>li>a { 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    } 
 
    .custom-navbar .collapse.in { 
 
    display: block !important; 
 
    } 
 
    .custom-navbar .navbar-nav .open .dropdown-menu { 
 
    position: static; 
 
    float: none; 
 
    width: auto; 
 
    margin-top: 0; 
 
    background-color: transparent; 
 
    border: 0; 
 
    -webkit-box-shadow: none; 
 
    box-shadow: none; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-inverse navbar-static-top custom-navbar" role="navigation"> 
 
    <div class="container-fluid"> 
 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#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> 
 
    <div class="navbar-header"> <a class="navbar-brand" rel="home" href="#" title="Help"> 
 
     Brand 
 
     </a> 
 

 
    </div> 
 
    <div class="navbar-collapse collapse" id="navbar-collapse-1"> 
 
     <!-- Non-collapsing right-side icons --> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Home</a> 
 

 
     </li> 
 
     <li><a href="#">About</a> 
 

 
     </li> 
 
     <li><a href="#">Contact</a> 
 

 
     </li> 
 
     <li> 
 
      <a href="#" class="fa fa-cog"></a> 
 

 
     </li> 
 
     <li> 
 
      <a href="#" class="fa fa-home"></a> 
 

 
     </li> 
 
     </ul> 
 
    </div> 
 
    <!--/.nav-collapse --> 
 
    </div> 
 
    <!--/.container --> 
 
</nav>