Is it possible to change the icon of the mobile menu?

Hi there,

you can use the follow PHP snippet to change the hamburger icon to a different SVG:

add_filter( 'generate_svg_icon', function( $output, $icon ) {
    if ( 'menu-bars' === $icon ) {
        $svg = 'add your <svg>...</svg> here';

        return sprintf(
            '<span class="gp-icon %1$s">
                %2$s
            </span>',
            $icon,
            $svg
        );
    }

    return $output;
}, 15, 2 );

You need to update this line to include your inline SVG: $svg = 'add your <svg>...</svg> here';

hi! This is nice!
Is it possible and what would be the snippet to change the mobile menu icon and the secondary menu icon individualy?
Thanks in advance!

Hi there,

unfortunately there isn't a filter that differentiates between primary and secondary menus.
You could use some CSS to hide the default icon and include an image using a CSS pseudo element.

Ok, thanks!

You're welcome

Hi,

I tried using the code below to replace the hamburger icon but it didn't work.

Should I put the URL of my own icon between <svg> and </svg>?

Hi there,

do you have .svg file for the icon ?

Hi,

Yes I have. I have created my own svg file.

Use this site:

https://jakearchibald.github.io/svgomg/

To upload your SVG and it with return the SVG HTML which will look something like:

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-alarm-fill" viewBox="0 0 16 16">
  <path d="M6 .5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1H9v1.07a7.001 7.001 0 0 1 3.274 12.474l.601.602a.5.5 0 0 1-.707.708l-.746-.746A6.97 6.97 0 0 1 8 16a6.97 6.97 0 0 1-3.422-.892l-.746.746a.5.5 0 0 1-.707-.708l.602-.602A7.001 7.001 0 0 1 7 2.07V1h-.5A.5.5 0 0 1 6 .5zm2.5 5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM11.613 1.86a2.5 2.5 0 1 1 3.527 3.527 8.035 8.035 0 0 0-3.527-3.527z"/>
</svg>

Copy and paste that into the $svg = ''