Do you want the animated hamburger icon for you mobile menu on Beaver Builder theme? You can easily do it with current mobile menu button. Before implementing this functionality you will keep a backup of your child theme. Let’s follow the instruction at below:

Setting the Responsive Nav Toggle Type

Login to Dashboard, navigate to Appearance -> Customize page, expand the Header -> Nay Layout section and set “Hamburger Icon” option in Responsive Nav Toggle drop down field.

Filtering the Nav Toggle Text

Here hamburger icon is making with CSS. Therefore replaces the the font awesome icon markup with plain HTML markup. Beaver parent theme have a filter “fl_nav_toggle_text”. So you can alter the default value with custom one. I added the following PHP code in my child theme’s functions.php file:

Filtering the nav toggle text

add_filter( 'fl_nav_toggle_text', 'frame_animated_hamburger_icon' );
function frame_animated_hamburger_icon( $text )
{
	$type = FLTheme::get_setting( 'fl-mobile-nav-toggle' );

	if ( 'icon' == $type ) {
		$text = ' '. __( 'Menu', 'fl-automator' ) . '';
	}

	return $text;
}

Creates Hamburger Icon by CSS

Hamburger and cross icon are creating by CSS3 code. Open the style.css file and add the following the CSS

Creating Hamburger & Cross icon

/* Animated Hamburger Icon
------------------------------------------- */

button.navbar-toggle:focus,
.navbar-toggle span.animated-hamburger:focus {
	outline: 0;
	outline: none;
}

.navbar-toggle span.animated-hamburger,
.navbar-toggle span.animated-hamburger:after,
.navbar-toggle span.animated-hamburger:before {
	background: #333;
	cursor: pointer;
	display: inline-block;
	height: 1px;
	position: relative;
	top: -1px;
	-webkit-transition: all 500ms ease-in-out 0s;
	-moz-transition:    all 500ms ease-in-out 0s;
	-o-transition:      all 500ms ease-in-out 0s;
	transition:         all 500ms ease-in-out 0s;
	vertical-align: middle;
	width: 40px;
}

.navbar-toggle span.animated-hamburger:after,
.navbar-toggle span.animated-hamburger:before {
	content: "";
	display: inline-block;
	left: 0;
	position: absolute;
}

.navbar-toggle span.animated-hamburger,    
.navbar-toggle span.animated-hamburger:after,
.navbar-toggle span.animated-hamburger:before {
  	width: 18px;         
}

.navbar-toggle span.animated-hamburger:after {
	bottom: -5px;
	top: auto;
}

.navbar-toggle span.animated-hamburger:before {
 	top: -5px;
}

.navbar-toggle.on span.animated-hamburger {
	background: transparent;
}

.navbar-toggle.on .animated-hamburger:after {
	bottom: 0;
	-webkit-transform:  rotate(-45deg);  
	-moz-transform:     rotate(-45deg);
	-o-transform:       rotate(-45deg);
	transform:          rotate(-45deg);
}

.navbar-toggle.on .animated-hamburger:before {
	top: 0;
	-webkit-transform:  rotate(45deg);
	-moz-transform:     rotate(45deg);
	-o-transform:       rotate(45deg);
	transform:          rotate(45deg);
}

Toggles the CSS Class for Smooth Animation

The JS script removes the “off” class and adds the “on” class when clicking on the hamburger icon. Opposite action executes when clicking on the “X” icon.

Creates a new JS file “animated-hamburger.js” and put into child theme’s “js” folder. You will create this folder if you have not. Here is the full code of this JS file:

Toggling the CSS class

(function($){
	
	$(function(){
		$( 'button.navbar-toggle' ).addClass('off');
		$( 'button.navbar-toggle' ).click(function( event ) {

			if( $(this).hasClass('off') ) {
				$(this).removeClass('off').addClass('on');
			}else{
				$(this).removeClass('on').addClass('off');
			}

		});
	});

})(jQuery);

Loads the Above JS file

Enqueue the script on the site. Open the functions.php file and add this small PHP snippet at end of the file:

Enqueue the scripts

add_action( 'wp_enqueue_scripts', 'frame_animated_hamburger_icon_scripts', 1005 );
function frame_animated_hamburger_icon_scripts()
{
	wp_enqueue_script( 'animated-hamburger', get_stylesheet_directory_uri() . '/js/animated-hamburger.js', array(), '1.6', true );
}

Result