AppStrap.

Overlay Main Menu Hide your main menu in a beautiful overlay.

To add a persistent overlay main menu simply set/remove the following classes on the following elements:

• 1 .navbar-toggler : remove any .d-none classes so it shows at all screenwidths.
• 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>

  copy code

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

Options

Effects

1. Default (fade)
2. Slide Down (Add .slide-down class to .overlay element)
3. Slide Up (Add .slide-up class to .overlay element)

Styles

1. Default (dark)
2. White (Add .overlay-white class to .overlay element)
3. Primary (Add .overlay-primary class to .overlay element)

Styles and effects can be combined.