Bootstrap汉堡导航菜单（全屏）

Question

以下是boot ply上的一些代码：

我想要做的是，而不是在调整窗口大小时出现的汉堡菜单，我想要菜单的全屏版本，具有相同的效果，但适用于非移动屏幕。汉堡菜单似乎只在移动设备上激活。我怎样才能做到这一点？感谢

Answer 1

您必须使用媒体查询并更改默认值以在较大的视口中公开navbar-toggle类。将媒体查询宽度更改为您需要的任何内容。

＆＃13;

＆＃13;

.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;
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;