Swap GeneratePress Hamburger Icon for Apple.com’s

Improve the style of your hamburger menu icon with a snippet of php!

Just a little snippet of php is all ya’ need!

/* Hamburger Menu */ 

add_filter( 'generate_svg_icon', function( $output, $icon ) {
    if ( 'menu-bars' === $icon ) {
        $svg = '<svg width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 7.6C0 7.26863 0.268629 7 0.6 7H14.6C14.9314 7 15.2 7.26863 15.2 7.6C15.2 7.93137 14.9314 8.2 14.6 8.2H0.6C0.268629 8.2 0 7.93137 0 7.6Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0.6C0 0.268629 0.268629 0 0.6 0H14.6C14.9314 0 15.2 0.268629 15.2 0.6C15.2 0.931371 14.9314 1.2 14.6 1.2H0.6C0.268629 1.2 0 0.931371 0 0.6Z" fill="currentColor"/>
</svg>';
        return sprintf(
            '<span class="gp-icon %1$s">
                %2$s
            </span>',
            $icon,
            $svg
        );
    }
    return $output;
}, 15, 2 );

If you want to put your own icon in there, you just need to replace everything in the <svg>...</svg> tags.

I used the fill of “currentColor” so you can continue to color the icon using the theme’s customizer settings — so if you swap your SVG out, make sure to replace any colors with “currentColor

Kyle Van Deusen

Co-founder of The Admin Bar Community, owner of OGAL Web Design, and a GeneratePress & GenerateBlocks enthusiast.

For official support, please visit the forums for GeneratePress or GenerateBlocks

If you're looking to have a website built with GeneratePress & GenerateBlocks, then visit my agency website.

Leave a Comment