- This topic has 13 replies, 4 voices, and was last updated 4 years, 8 months ago by
.
-
Posts
-
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.
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.
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?
Of course you can use a PHP Snippet to add your own inline SVG icon. This topic explains how:
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!
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 🙂
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.
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.
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?
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.
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.
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 );Perfect thank you Tom!
You’re welcome 🙂
- You must be logged in to reply to this topic.
