Archived topic
Customize off canvas menu toggle
8 replies · Started by Fábio Rodrigo on November 9, 2020
Hello, I want to use the hamburger and the search icon to toggle the slide-out menu,as one button (my search form is inside the slide-out).
But I can't use icons as the "menu label" in the theme customizer.
I'm trying to use a hook inside the navigation to create a new slideout toggle with this code:
<span class="slideout-toggle">hambuguer icon | search icon</span> (by the way, how do I put the svg icons inside here?)
The toggle is working, but now I have two slide-out toggle buttons. The default and my own.
How do I hide just the default one or, even better, how do I use icons as the menu label to keep using the default toggle?
Thank you for your time.
Hi there,
You could replace the Menu Toggle icon with your own SVG that has both Menu and Search icons/
Tom provides a PHP Snippet here that will allow you to do that:
https://generatepress.com/forums/topic/svg-menu-icon-bars-fatter/#post-1520827
Unfortunately, it didn't work. I tried adding the snippet using the pluginception method.
https://i.imgur.com/kr0KHZy.jpg
There's no cache (localhost server).
The weird thing is that there's no error either.
Can you post the code here?
Hello,
add_filter( 'generate_svg_icon_element', function( $output, $icon ) {
if ( 'menu-bars' === $icon ) {
$output = '<svg class="svg-icon" viewBox="0 0 20 20">
<path d="M18.125,15.804l-4.038-4.037c0.675-1.079,1.012-2.308,1.01-3.534C15.089,4.62,12.199,1.75,8.584,1.75C4.815,1.75,1.982,4.726,2,8.286c0.021,3.577,2.908,6.549,6.578,6.549c1.241,0,2.417-0.347,3.44-0.985l4.032,4.026c0.167,0.166,0.43,0.166,0.596,0l1.479-1.478C18.292,16.234,18.292,15.968,18.125,15.804 M8.578,13.99c-3.198,0-5.716-2.593-5.733-5.71c-0.017-3.084,2.438-5.686,5.74-5.686c3.197,0,5.625,2.493,5.64,5.624C14.242,11.548,11.621,13.99,8.578,13.99 M16.349,16.981l-3.637-3.635c0.131-0.11,0.721-0.695,0.876-0.884l3.642,3.639L16.349,16.981z"></path>
</svg>
<svg class="svg-icon" viewBox="0 0 20 20">
<path d="M10,1.445c-4.726,0-8.555,3.829-8.555,8.555c0,4.725,3.829,8.555,8.555,8.555c4.725,0,8.555-3.83,8.555-8.555C18.555,5.274,14.725,1.445,10,1.445 M10,17.654c-4.221,0-7.654-3.434-7.654-7.654c0-4.221,3.433-7.654,7.654-7.654c4.222,0,7.654,3.433,7.654,7.654C17.654,14.221,14.222,17.654,10,17.654 M14.39,10c0,0.248-0.203,0.45-0.45,0.45H6.06c-0.248,0-0.45-0.203-0.45-0.45s0.203-0.45,0.45-0.45h7.879C14.187,9.55,14.39,9.752,14.39,10 M14.39,12.702c0,0.247-0.203,0.449-0.45,0.449H6.06c-0.248,0-0.45-0.202-0.45-0.449c0-0.248,0.203-0.451,0.45-0.451h7.879C14.187,12.251,14.39,12.454,14.39,12.702 M14.39,7.298c0,0.248-0.203,0.45-0.45,0.45H6.06c-0.248,0-0.45-0.203-0.45-0.45s0.203-0.45,0.45-0.45h7.879C14.187,6.848,14.39,7.051,14.39,7.298"></path>
</svg>';
}
return $output;
}, 10, 2 );Out of curiosity, I tried to generate an error, but nothing changed (not even a error message).
It's like the wordpress is not using the code or it's another filter.
In Customizer > General --> Icon Type is this set to SVG ?
Yes, it's SVG. Silly question: 'menu-bars' is the right icon? In the code there's mentions of pro-menu-bars ico, for example.
Thank you for your time.
Sorry for the double post: the code works on the live server, but not on my local host server (don't know why).
Thank you for your help.
Glad to hear you found the issue.
