Html Swiper-可滑动菜单全宽

我想在我的项目中使用Bootstrap4构建。 我有一个类似这样的导航，其中菜单按钮位于小屏幕的右侧：

<div class="container">
  <nav class="navbar navbar-toggleable-sm navbar-light bg-faded">

      <div class="menu-button navbar-toggler navbar-toggler-right">
         <div class="bar"></div>
         <div class="bar"></div>
         <div class="bar"></div>
      </div>
      <a href="{{ url('/') }}" class="logo-link">
        <img src="{{ asset('/img/logo-small-new.png') }}" alt="logo">
      </a>
      <div class="navbar-collapse collapse justify-content-between" id="navbar5">
          <form action="/search" method="get" class="my-auto d-inline mx-auto col-md-8" role="search">
              <div class="input-group">
                <span class="input-group-addon" id="basic-addon1">
                  <button type="submit" class="search-button">
                    <i class="ion-ios-search-strong"></i>
                  </button>
                </span>
                <input type="text" id="search-input" name="q" class="form-control aa-input-search" placeholder="Search for players and videos ..."  value="{{ Request::get('q') }}" aria-describedby="basic-addon1">
              </div>
          </form>
          <ul class="navbar-nav my-auto">
              @if (Auth::check())
              <li class="nav-item dropdown">
                  <a class="nav-link" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <i class="ion-ios-gear-outline"></i>
                  </a>
                  <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
                      <a class="dropdown-item" href="{{ url('/home') }}">Admin dashboard</a>
                      <a class="dropdown-item" href="{{ url('/logout') }}"
                          onclick="event.preventDefault();
                                   document.getElementById('logout-form').submit();">
                          Log out
                      </a>
                      <form id="logout-form" action="{{ url('/logout') }}" method="POST" style="display: none;">
                          {{ csrf_field() }}
                      </form>
                  </div>
              </li>
              @else
              <li>
                <a href="{{ url('/login') }}" class="btn btn-outline-info">Sign in</a>
              </li>
              @endif
          </ul>
      </div>
  </nav>
</div>

然后菜单是全宽的，但是菜单按钮不可见，我尝试过给它提供大的z索引，但是没有帮助。我需要做什么才能使它可见？

警告：我在您链接的演示中对代码做了这些更改。我没有玩你粘贴在这里的html

你在正确的轨道上。如您所做的那样，删除

宽度

和

最大宽度

.menu {
    min-width: 100px;   
    background-color: #2C8DFB;
    color: #fff;
}

然后添加以下

css

以在展开菜单时将按钮移到右上角：

.menu {
    min-width: 100px;
    /* width: 70%; */
    /* max-width: 320px; */
    background-color: #2C8DFB;
    color: #fff;
}

.menu-button.cross{
    left: -80px;
}

如果您想在小屏幕上使用全屏菜单和右上角的按钮，使其仅适用于，，则需要使用媒体查询。根据需要修改以下代码

/*smaller screen css*/
.menu {
    min-width: 100px;   
    background-color: #2C8DFB;
    color: #fff;
}
.menu-button.cross{
    left: -80px;
}
media (min-width: 768px) {
    /*larger screen css*/
    .menu {
        width: 70%;
        max-width: 320px;
    }
    .menu-button.cross{
        left: 0;
    }
}

---

感谢您的帮助，有没有办法将菜单高度设置为视口的100%，因为现在它是内容的高度。我尝试过将菜单高度设置为100vh，并将overflow-y:hidden设置为100vh，但没有效果。@Leff尝试将此css用于菜单元素：

position:absolute；排名：0；底部：0位置：相对
。不要手动设置菜单高度。如果我这样做，菜单就会覆盖内容。@Leff您应该只将css应用于活动菜单。单击菜单按钮时，html元素的类名将更改。例如，在演示中，它将变为“swiper slide active”（
）
。仅将css应用于此。您还需要为菜单指定它自己的类，以便将其与内容幻灯片区分开来。所以像
.swiper slide这样的选择器处于活动状态。我的菜单{/*css here*/}
。如果我误解了，我们需要一个实际用例的演示。很难理解你的意思。这可能也是一个单独的SO问题。你是对的，我会尝试你的建议，并为这个问题提供奖励，非常感谢你的帮助！