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 classoverlay-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">×</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.
Options
Effects
- Default (fade)
-
Slide Down (Add
.slide-down
class to.overlay
element) -
Slide Up (Add
.slide-up
class to.overlay
element)
Styles
- Default (dark)
-
White (Add
.overlay-white
class to.overlay
element) -
Primary (Add
.overlay-primary
class to.overlay
element)
Styles and effects can be combined.