Skip to content

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.

Awesome Features

99.9% Uptime / Free Upgrades / Fully Responsive / Bug Free
Theme Colours

Green Red Blue Purple Pink Orange Lime Blue-dark Red-dark Brown Cyan-dark Yellow Slate Olive Teal Green-bright

Cookies are NOT enabled so colour selection is not persistent.

Back to main homepage

Back to intro page