[Support request] Is it possible to change the icon of the mobile menu?

[İsmihan]

I use 2 menus on my website.
Can you help me change the icons on the main menu and secondary menu one or both of them on the mobile.

[David]

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

[cjenti]

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!

[David]

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.

[cjenti]

Ok, thanks!

[David]

You’re welcome

[Mårten]

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>?

[David]

Hi there,

do you have .svg file for the icon ?

[Mårten]

Hi,

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

[David]

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 = ''

[Author]

Posts