[Resolved] change mobile toggle icon

Home Forums Support [Resolved] change mobile toggle icon

Home Forums Support change mobile toggle icon

  • This topic has 7 replies, 2 voices, and was last updated 4 months ago by David.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #2177305
    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 );
    #2177325
    David
    Staff
    Customer Support

    Hi there,

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

    #2177341
    jasond

    Hi David

    Sent you the link via private info.

    #2177350
    David
    Staff
    Customer Support

    Try adding this CSS:

    .gp-icon.icon-menu-bars svg {
        fill: none;
    }
    #2179339
    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/

    #2179538
    David
    Staff
    Customer Support

    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>
    ';
    #2179570
    jasond

    amazing! thank you very much for your help

    #2179591
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.