Full Screen Overlay Menu with Beaver Builder Plugin

Do you want to show the full screen overlay menu on click of a hamburger menu button? You can easily implement such overlay menu using the Beaver Builder Plugin.

Organizing the JS and CSS file

First organizing the all dependencies for full screen overlay menu functionality.

1. Click on the “Download” button and save the zip file on your local machine.

2. Extract the zip file

3. Move the CSS and js folders into your child theme folder like attached screenshot.


DOWNLOAD

Enqueue Scripts & CSS

Loading the all JS and CSS file at frontend using wp_enqueue_scripts hook. Open the functions.php file of your child theme folder and add this PHP scripts at end of the file:

add_action( 'wp_enqueue_scripts', 'frame_enqueue_scripts', 1001 );
function frame_enqueue_scripts()
{
	if( FLBuilderModel::is_builder_active() ) {
		return;
	} else {
		wp_enqueue_style( 'hugeinc', get_stylesheet_directory_uri() . '/css/hugeinc.css', array(), '1.0', 'all' );

		wp_enqueue_script( 'modernizr', get_stylesheet_directory_uri() . '/js/modernizr.custom.js', array(), '1.0' );
		wp_enqueue_script( 'classie', get_stylesheet_directory_uri() . '/js/classie.js', array(), '1.6', true );
		wp_enqueue_script( 'overlay-hugeinc', get_stylesheet_directory_uri() . '/js/overlay-hugeinc.js', array(), '1.0', true );
	}
}

Creates Full Screen Menu Template

Creates the full screen menu template using Beaver Builder plugin. Make sure that you already enabled the Templates post type from Settings -> Page Builder -> User Access page.

  1. Navigate to Builder -> Templates page
  2. Click on Add New button
  3. Create a template like video (see below)

Renders Full Screen Menu Template at Front End : BB Theme

Beaver Builder have a method “FLBuilder::render_query()”. So you can display the template using PHP code at any places on your site. Here fl_page_close hook is used and it is placing the template markup at bottom of the site pages.

add_action( 'fl_page_close', function(){

	if( FLBuilderModel::is_builder_active() ) {
		return;
	} 
	
	echo '

			

				
';

			FLBuilder::render_query(array(
				'post_type' 	=> 'fl-builder-template',
				'p' 			=> 1000
			));

	echo '
'; }, 1 );

1000 is my template ID. You will replace it with your own template ID.

Creates Site Header Using Beaver Builder Template

Replacing the default beaver theme’s header with beaver builder template. Follow the steps below

  1. Navigate to Appearance -> Customize
  2. Click on Header panel
  3. Click on Header Layout section
  4. Select “None” from Layout drop down list. So it will completely remove the site header
  5. Creating a Template using Beaver Builder plugin (see the video below)

Note: You saw that I used button module and added “trigger-overlay” ID into Advanced Tab -> ID input field. This ID is triggering the overlay menu effect.

After completing the header template you will open the functions.php of your child theme and add this code at end of the file:

add_action( 'fl_after_header', function(){
	echo '

			
';

		FLBuilder::render_query(array(
			'post_type' 	=> 'fl-builder-template',
			'p' 			=> 1006
		));

	echo '
';
}, 1 );

You will replace 1006 with your own template ID.

NOTES: IF YOUR ARE USING THE BEAVER THEMER ADDON THEN YOU CAN AVOID THE ABOVE STEP (Creates Site Header Using Beaver Builder Template).

Posted in