Animated Hamburger Icon for the Beaver Builder theme

Animated Hamburger Icon
for the Beaver Builder theme

Animated Hamburger icon with text

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;
}

/*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-toggle This 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);
}