AppStrap.

Responsive Overlay Main Menu Hide your main menu in a collapible wrapper depending on screenwidth.

To add a responsive collapse main menu instead of the default "off canvas" mobile menu which reacts to screenwidth simply set/remove the following classes on the following elements:

• 1 .navbar-toggler : add the attribute data-toggle="overlay" & data-target="#overlay-menu"
• 2 Also ensure .navbar-toggler has the following attributes set: data-toggle="overlay" & data-target="#overlay-menu" . NOTE: you can use any link to trigger the overlay it doesn't have to be the .navbar-toggler element.
• 3 Anywhere within page add your overlay menu HTML, we added ours in the footer of our page. The overlay should have the class or ID of the data-target attribute.
  Since AppStrap version 3.1 the overlay now requires the class overlay-fp .
  View code example

  <div class="overlay overlay-fp" id="overlay-menu">
    <button type="button" class="close" aria-label="Close" data-dismiss="overlay">
      <span aria-hidden="true">&times;</span>
    </button>  
    <div class="overlay-content">
      <div class="overlay-header">
        <i class="fa fa-home fa-3x"></i>
      </div>
      
      <div class="overlay-body">
        <ul class="nav nav-overlay">
          <li class="nav-link"><a href="#">About Us</a></li>
          <li class="nav-link"><a href="#">Services</a></li>
          <li class="nav-link"><a href="#">Pricing</a></li>
          <li class="nav-link"><a href="#">Contact</a></li>
        </ul>
      </div>
      
      <div class="overlay-footer">
        <a href="#" data-dismiss="overlay">Close Me</a>
      </div>
    </div>
  </div>

  data-dismiss="overlay" can be added to any link or button element within the overlay to close it when clicked.