Animated Hamburger Icon
for the Beaver Builder theme

Animated Hamburger icon with text  animated-icon-with

Add to functions.php in the Beaver Builder child theme


// Animated Hamburger icon with text

function my_nav_toggle_text( $text ) {
return '
<div onclick="myFunction(this)">
<span class="hamburger-text">MENU</span><br>
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<script>
function myFunction(x) {
x.classList.toggle("change");
}
</script>
';
}
add_filter( 'fl_nav_toggle_text', 'my_nav_toggle_text' );

Animated Hamburger icon without text 

Add to functions.php in the Beaver Builder child theme


// Animated Hamburger icon without text

function my_nav_toggle_text( $text ) {
return '
<div onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<script>
function myFunction(x) {
x.classList.toggle("change");
}
</script>
';
}
add_filter( 'fl_nav_toggle_text', 'my_nav_toggle_text' );

CSS for Hamburger icon with text  

Add to styles.css in the Beaver Builder child theme

/*ANIMATED HAMBURGER ICON */
.bar1, .bar2, .bar3
{
width: 22px;
height: 2px;
background-color: #333;
transition: 0.4s;
}
.bar1
{
margin: 0 0 4px 0;
}
.bar3
{
margin: 4px 0 0;
}

/*CHANGE TO TWO BARS CROSSED */
.change .bar1
{
-webkit-transform: rotate(-45deg) translate(-7px, 2px);
transform: rotate(-45deg) translate(-7px, 2px);
}
.change .bar2
{
opacity: 0;
}
.change .bar3
{
-webkit-transform: rotate(45deg) translate(-6px, -2px);
transform: rotate(45deg) translate(-6px, -2px);
}

/*Sets the position and size of the menu text */

margin-left: 4px;
}
.navbar-toggle .hamburger-text
{
font-size: 9px;
line-height: 1.3;
}

/*removes clickable areas around the icon which could allow visitors to toggle without the animation occurring */

.fl-page-nav-toggle-icon .fl-page-nav .navbar-toggle
{
margin: 0;
padding: 0;
}

 

CSS for Hamburger icon without text  

Add to styles.css in the Beaver Builder child theme

/*ANIMATED HAMBURGER ICON */
.bar1, .bar2, .bar3
{
width: 22px;
height: 2px;
background-color: #333;
transition: 0.4s;
}
.bar1
{
margin: 0 0 4px 0;
}
.bar3
{
margin: 4px 0 0;
}

/*CHANGE TO TWO BARS CROSSED */
.change .bar1
{
-webkit-transform: rotate(-45deg) translate(-7px, 2px);
transform: rotate(-45deg) translate(-7px, 2px);
}
.change .bar2
{
opacity: 0;
}
.change .bar3
{
-webkit-transform: rotate(45deg) translate(-6px, -2px);
transform: rotate(45deg) translate(-6px, -2px);
}

/*removes clickable areas around the icon which could allow visitors to toggle without the animation occurring */

.fl-page-nav-toggle-icon .fl-page-nav .navbar-toggle
{
margin: 0;
padding: 0;
}

 

For something larger try this

/*ANIMATED HAMBURGER ICON */
.bar1, .bar2, .bar3
{
width: 40px;
height: 4px;
background-color: #333;
transition: 0.4s;
}
.bar1
{
margin: 0 0 6px 0;
}

.bar3
{
margin: 6px 0 0;
}

 

.change .bar1
{
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-6px, 8px);
}
.change .bar2
{
opacity: 0;
}
.change .bar3
{
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-6px, -8px);
}
.fl-page-nav-toggle-icon .fl-page-nav .navbar-toggle
{
margin: 0;
padding: 0;
}

BB-larger-toggleThis may give the fingers a better experience than the one above and is not a "fat" as the  default w3 school one.

The CSS for rotating menu icons

You will need to add the FontAwesome icon to the WP after the text like this  <i class="fa fa-angle-down" aria-hidden="true"></i>

/*Animated dropdown icons*/
.fl-page-nav A .fa-angle-down
{
transition: all 0.3s ease;
}
.fl-page-nav .fl-sub-menu-open A .fa-angle-down
{
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}

Further reading:

Test your own CSS version with W3schools

The toggle text filter in the Beaver Builder Knowledge Base

The site that the client was inspired by

Note:

Select the the hamburger icon setting on the the Beaver Builder theme.

Customizing ▸ Header ▸Nav Layout ▸Mobile Nav Toggle (and select Hamburger Icon)

 

 

 

...and a few affiliate links (well you never know)

Best Beaver Builder Add-ons
Ultimate Addons for Beaver Builder
Get Beaver Builder Now!