CSS Sub Menu Toggles in Genesis

The up and down arrows for the mobile sub menu toggles in Genesis uses Dashicons.

This tutorial provides the steps to replace it with CSS-only approach.

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

Step 1

Edit child theme’s functions.php.

Inside genesis_sample_responsive_menu_settings() replace

'subMenuIconClass' => 'dashicons-before dashicons-arrow-down-alt2',

with

'subMenuIconClass' => '',

Step 2

In style.css replace

.sub-menu-toggle::before {
    display: inline-block;
    text-rendering: auto;
    -webkit-transform: rotate( 0 );
    -ms-transform:     rotate( 0 );
    transform:         rotate( 0 );
    transition: transform .25s ease-in-out;
}

.sub-menu-toggle.activated::before {
    -webkit-transform: rotate( 180deg );
    -ms-transform:     rotate( 180deg );
    transform:         rotate( 180deg );
}

with

.sub-menu-toggle::before {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-top: 2px solid;
    border-right: 2px solid;
    content: "";
    -webkit-transition: -webkit-transform 0.25s ease-in-out;
    transition: -webkit-transform 0.25s ease-in-out;
    transition: transform 0.25s ease-in-out;
    transition: transform 0.25s ease-in-out, -webkit-transform 0.25s ease-in-out;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    text-rendering: auto;
}

.sub-menu-toggle.activated::before {
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
}