Archived topic
change mobile toggle icon
7 replies · Started by jasond on April 4, 2022
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 );Hi there,
can you share a link to a site where i can see the icon ?
Hi David
Sent you the link via private info.
Try adding this CSS:
.gp-icon.icon-menu-bars svg {
fill: none;
}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/
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>
';amazing! thank you very much for your help
You're welcome
