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 .hidden-*-* 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

    ×  
   
    
   
   
   
  About Us
   
  Services
   
  Pricing
   
  Contact
   
   
   
   Close Me 
   
   

  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.