<header>

  <nav id="main-navbar" class="navbar navbar-expand-lg navbar-light nav-bg fixed-top">

    <div class="container-fluid">

      <ul class="navbar-nav ms-auto d-flex flex-row">

        <li class="nav-item">

          <button type="button" class="btn btn-outline-success btn-floating" data-mdb-toggle="modal" data-mdb-target="#mobileUserMenuModal">

          </button>

        </li>

      </ul>

    </div>

  </nav>

</header>

<main id="main-content" class="main-content">

    <div class="main-container px-4">

​

      <span>Main content</span>

      <div class="modal top fade" id="mobileUserMenuModal" tabindex="-1" aria-labelledby="mobileUserMenuModalLabel" aria-hidden="true">

        <div class="modal-dialog modal-fullscreen">

          <div class="modal-content">

            <div class="modal-header">

              <h5 class="modal-title" id="mobileUserMenuModalLabel">User Menu</h5>

              <button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>

            </div>

            <div class="modal-body">

              <span>test</span>

            </div>

          </div>

        </div>

      </div>

  </div>

</main>