Flyout menu on page

Demo

This demo uses a menu widget and some custom CSS to show as a flyout over the page instead of pushing down the content below.

How to

Add this custom CSS on the menu widget.

				
					selector .elementor-menu-toggle .eicon-menu-bar:before{
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
    content: "\f078"; /* Icon When Closed */
}

selector  .elementor-menu-toggle.elementor-active .eicon-menu-bar:before{
    content: "\f077"; /* Icon When Opened */
}

selector .elementor-menu-toggle:before {
        content: "Menu Label";
        padding-right: 8px;
}

selector .elementor-nav-menu__container {
    width: 250px!important;
    left: 0!important;
    border: 1px solid #ccc;
}