[Resolved] change mobile toggle icon

[jasond]

Hello

I used this code in functions to change the mobile toggle icon but the result looks weird. The icon doesn’t appear correctly like what i have in Figma. Can you advise?

Thanks

add_filter( 'generate_svg_icon', function( $output, $icon ) {
    if ( 'menu-bars' === $icon ) {
        $output = '<svg width="28" height="16" viewBox="0 0 28 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 2L14 13L26 2" stroke="black" stroke-width="3"/></svg>';
	
		$classes = array(
			'gp-icon',
			'icon-' . $icon,
		);
	
		return sprintf(
			'<span class="%1$s">%2$s</span>',
			implode( ' ', $classes ),
			$output
		);
	}

    return $output;
}, 15, 2 );

[David]

Hi there,

can you share a link to a site where i can see the icon ?

[jasond]

Hi David

Sent you the link via private info.

[David]

Try adding this CSS:

.gp-icon.icon-menu-bars svg {
    fill: none;
}

[jasond]

Thank you David it works

But when I click the icon, it doesn’t flip up.

The sample code Tom provided work https://generatepress.com/forums/topic/mobile-menu-icon/

[David]

In here:

$output = '<svg width="28" height="16" viewBox="0 0 28 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 2L14 13L26 2" stroke="black" stroke-width="3"/></svg>';

The $output should contain 2 x SVG HTML elements. The second one should be the flipped SVG – so it would look something like this ( but with 2 different SVGs ):

$output = '<svg width="28" height="16" viewBox="0 0 28 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 2L14 13L26 2" stroke="black" stroke-width="3"/></svg>
<svg width="28" height="16" viewBox="0 0 28 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 2L14 13L26 2" stroke="black" stroke-width="3"/></svg>
';

[jasond]

amazing! thank you very much for your help

[David]

You’re welcome

[Author]

Posts