Animated Hamburger Menu Icon in Genesis

In Genesis (Genesis Sample, to be precise as well as most other child themes from StudioPress), tapping on the hamburger menu icon at smaller screen widths will toggle the responsive menu and the menu icon does not change i.e., remains a hamburger.

It is possible to customize this such that tapping the mobile menu’s icon changes hamburger to a X (close) with a smooth animation using CSS-animated hamburgers by Jonathan Suh.

In this tutorial, I share the steps for setting up the animated hamburger icon using the Slider animation. Other available animation options can be seen on the project page.

While the tutorial has been written for Genesis Sample, it should work with a few adjustments in any Genesis theme

Step 1 – Load hamburgers.css’ generic CSS

Edit your child theme’s style.css. Locate the breakpoint at which the menu collapses to hamburger. In Genesis Sample, it is 1023px.

At the end of existing code in the 1023px media query, add generic CSS highlighted here.

Step 2 – Load hamburgers.css’ for the type of hamburger you’re craving

In this example, we are after Slider type of menu icon animation.

Therefore, at https://github.com/jonsuh/hamburgers/blob/master/dist/hamburgers.css do a in-browser search (Cmd + F / Ctrl + F) for slider, copy the CSS for that animation and paste at the bottom of 1023px media query. Here’s the highlighted CSS code.

Replace all instances of is-active with activated since activated is the class that .menu-toggle button gets when it is toggled in Genesis.

If you would like to add the word Menu to the right of the icon, add this CSS, again in the media query for the breakpoint when the responsive menu begins to appear:

.hamburger-label {
    font-weight: 700;
    font-size: 16px;
    font-size: 1.6rem;
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
}

Step 3 – Adjust the CSS (optional)

Below is modified CSS code so it resembles the default responsive hamburger icon of Genesis Sample.

Important things to note:

a) Width is controlled by .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after. The thickness of each of the three horizontal lines is controlled by height property in the above group of selectors.

b) The gap or vertical space between the horizontal lines can be changed in the CSS for your animation type. Ex.: When using Slider type of animation, in the value of top for .hamburger--slider .hamburger-inner::before and .hamburger--slider .hamburger-inner::after. You’d also need to adjust the values in the activated selectors.

Here’s the modified CSS:

/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
.hamburger {
    padding: 15px 15px;
    display: inline-block;
    cursor: pointer;
    transition-property: opacity, filter;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    /* background-color: transparent;
    border: 0; */
    line-height: 1; /* to remove extra unwanted vertical space of .menu-toggle */
    margin: 0;
    overflow: visible;
}

/* .hamburger:hover {
    opacity: 0.7;
} */

.hamburger-box {
    /* width: 40px; */
    width: 20px;
    /* height: 24px; */
    height: 12px;
    display: inline-block;
    position: relative;
    vertical-align: middle; /* added this to vertically align with MENU text */
}

.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -2px;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    /* width: 40px; */
    width: 20px;
    /* height: 4px; */
    height: 3px;
    /* background-color: #000; */
    background-color: #333;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease;
}

.hamburger-inner::before,
.hamburger-inner::after {
    content: "";
    display: block;
}

.hamburger-inner::before {
    top: -10px;
}

.hamburger-inner::after {
    bottom: -10px;
}


/*
   * Slider
   */

.hamburger--slider .hamburger-inner {
    top: 2px;
}

.hamburger--slider .hamburger-inner::before {
    /* top: 10px; */
    top: 5px;
    transition-property: transform, opacity;
    transition-timing-function: ease;
    transition-duration: 0.15s;
}

.hamburger--slider .hamburger-inner::after {
    /* top: 20px; */
    top: 10px;
}

.hamburger--slider.activated .hamburger-inner {
    /* transform: translate3d(0, 10px, 0) rotate(45deg); */
    transform: translate3d(0, 5px, 0) rotate(45deg);
}

.hamburger--slider.activated .hamburger-inner::before {
    transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
    opacity: 0;
}

.hamburger--slider.activated .hamburger-inner::after {
    /* transform: translate3d(0, -20px, 0) rotate(-90deg); */
    transform: translate3d(0, -10px, 0) rotate(-90deg);
}

.hamburger-label {
    font-weight: 700;
    font-size: 16px;
    font-size: 1.6rem;
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
}

Step 4 – Set the markup in responsive menu settings section of functions.php.

In child theme’s functions.php, locate code similar to

// Define our responsive menu settings.
function genesis_sample_responsive_menu_settings() {

    $settings = array(
        'mainMenu'          => __( 'Menu', 'genesis-sample' ),
        'menuIconClass'     => 'dashicons-before dashicons-menu',
        'subMenu'           => __( 'Submenu', 'genesis-sample' ),
        'subMenuIconsClass' => 'dashicons-before dashicons-arrow-down-alt2',
        'menuClasses'       => array(
            'combine' => array(
                '.nav-primary',
                '.nav-header',
            ),
            'others'  => array(),
        ),
    );

    return $settings;

}

a) To display just the hamburger menu icon without the Menu text, replace

'mainMenu'          => __( 'Menu', 'genesis-sample' ),

with

'mainMenu'          => '<span class="hamburger-box"><span class="hamburger-inner"></span></span>',

To display the hamburger menu icon with the Menu text to its right, replace

'mainMenu'          => __( 'Menu', 'genesis-sample' ),

with

'mainMenu'          => sprintf( '<span class="hamburger-box"><span class="hamburger-inner"></span></span><span class="hamburger-label">%s</span>', __( 'Menu', 'genesis-sample' ) ),

b) Replace

'menuIconClass'     => 'dashicons-before dashicons-menu',

with

'menuIconClass'     => 'hamburger hamburger--slider',

Replace hamburger--slider with your desired hamburger-type class. The list can be seen in Step 3 here.

That’s it.