[Resolved] Mobile Menu Icon

Home Forums Support [Resolved] Mobile Menu Icon

Home Forums Support Mobile Menu Icon

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1615881
    chris

    Hi im trying to change the three lines icon on the mobile view menu.

    Is there an easy way to do this? I have been looking into some threads on here about an animated one, which i do like the idea off but it seemed complicated to get working correctly, and now im sure things have changed.

    Thank you.

    #1615946
    David
    Staff
    Customer Support

    Hi there,

    we provide a doc here on adding animated hamburgers:

    https://docs.generatepress.com/article/animated-hamburgers/

    But yes they are rather complicated to add.

    #1615997
    chris

    Ok is changing it to say an svg icon easier? or an icon from the plugin for nav menu icons?

    Must be possible?

    IF not is there a way to change the size of the main nav mobile icon and the second nav icon separately?

    Ideally id prefer to change both icons to different things and sizes?

    #1616001
    David
    Staff
    Customer Support

    Of course you can use a PHP Snippet to add your own inline SVG icon. This topic explains how:

    https://generatepress.com/forums/topic/is-it-possible-to-change-the-icon-of-the-mobile-menu/#post-1603579

    #1616008
    chris

    Actually all i require is the second nav icon to be an arrow pointing right, and when clicked an arrow pointing down?

    Main nav icon can stay as it is, but the second nav is smaller height so the normal size looks abit off.

    Thank you!

    #1617450
    Tom
    Lead Developer
    Lead Developer

    Our SVG icons are filterable, but it’s not possible to only filter the ones in specific elements.

    For example, if we filter the three bars, it will change the three bars icon across the entire site. If that’s ok then I can help with the PHP to change it.

    Let me know ๐Ÿ™‚

    #1618203
    chris

    The code in davids link seems to work like you said, to change all menu icons to SVG,

    My problem is now adding a hover effect for once clicked, and adding another svg in replacement of the “X” which stays the same now. Or is that what you’re saying isnt’t possible, to filter both icons open and close?

    Sorry to be a pain, thanks for your patience.

    #1618599
    David
    Staff
    Customer Support

    The way the icon works is there are two SVG elements – one for the hamburger and one for the close. When toggled it hides the first SVG and displays the second.

    So in the link i provided this line:

    $svg = ‘add your <svg>…</svg> here’;

    Needs two eg.

    $svg = '<svg>Open Menu Icon</svg><svg>Close Menu Icon</svg>';

    What Tom was saying is that if you change one hamburger icon they will all change ie. both the Primary and Secondary Navs.

    #1619175
    chris
    add_filter( 'generate_svg_icon', function( $output, $icon ) {
        if ( 'menu-bars' === $icon ) {
            $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="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>';
    
            return sprintf(
                '<span class="gp-icon %1$s">
                    %2$s
                </span>',
                $icon,
                $svg
            );
        }
    
        return $output;
    }, 15, 2 );

    doesnt work displays both together, am i doing something wrong?

    #1619341
    Elvin
    Staff
    Customer Support

    Hi there,

    Have you resolved this? I’ve checked the site and I don’t see any issue.

    Here’s what I see on my end: https://share.getcloudapp.com/NQuKPpBD

    Let us know.

    A wise man once said:
    "Have you cleared your cache?"

    #1619551
    chris

    No not solved I removed the second svg code because it was displaying two icons the up and down arrow next to each other with the code I supplied. Just removed it for thr time being as the site is actually live.

    #1620506
    Tom
    Lead Developer
    Lead Developer

    Try this instead:

    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 );
    #1621766
    chris

    Perfect thank you Tom!

    #1622613
    Tom
    Lead Developer
    Lead Developer
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.