引導漢堡導航菜單（全屏）

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>