Swiper - slideable menu full width

Question

I would like to use swiper slide menu in my project built with bootstrap 4. I have a navigation that looks like this, where the menu button is placed on the right side on small screens:

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

Now it works like in the demo shown here, but I would like the menu to take the full width, and the menu button to be visible in the right corner when the menu is open. If I comment out some of the css properties for the menu:

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

Then the menu is full width, but the menu button is not visible, I have tried with giving the big z-index to it, but that didn't help. What do I need to do to have it visible?

Answer 1

Caveat: I made these changes to the code in the demo you linked. I didn't play with the html you've pasted here.

You were on the right track. Remove out the width and max-width as you did already.

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

Then add the following css to move the button to the top right when you expand the menu:

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

If you want a fullwidth menu and the button on the top right to only apply on small screens you'll need to use a media query. Modify the below code as necessary.

/*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;
    }
}