Site logo

Archived topic

Change SVG icon ONLY on Secondary Menu with filter

3 replies · Started by antware on October 19, 2021

Viewing posts 1–4 of 4

Hi guys, I know how to change the hamburger icon using the standard filter:

// Change Hamburger Icon
add_filter( 'generate_svg_icon', function( $output, $icon ) {
    if ( 'menu-bars' === $icon ) {
        $output = '<svg aria-hidden="true" role="img" height="1em" width="1em" viewbox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path></svg> <svg aria-hidden="true" role="img" height="1em" width="1em" viewbox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z"></path></svg>';
	
		$classes = array(
			'gp-icon',
			'icon-' . $icon,
		);
	
		return sprintf(
			'<span class="%1$s">%2$s</span>',
			implode( ' ', $classes ),
			$output
		);
	}

    return $output;
}, 15, 2 );

However that changes the icon to be the same on both primary and secondary menu, but looking to have two different svg icons on each menu. Hope that makes sense. So primary menu (mobile) has its own icon and secondary nav on mobile has it's own svg icon.

Thanks guys.

Hi there,

Secondary navigation is hardcoded to use menu-bars icon as shown here -
https://share.getcloudapp.com/9ZuRWv0q

So is the primary navigation - https://github.com/tomusborne/generatepress/blob/b60b853630da6d9015722da903e53c8064148b0a/inc/structure/navigation.php#L39-L48

we can only filter what SVG icon is used but we can't filter which SVG icon displays on what navigation because there's no output filter for them, unfortunately.

You may have to modify the related codes if you want them to use different icons.
(Secondary navigation icon is on /wp-content/plugins/gp-premium/secondary-nav/functions/functions.php line 719)

Or try appending an icon manually using JS.

Thank you for your response Elvin.

No problem. :D

This archived topic is closed to new replies.