[Resolved] Customize off canvas menu toggle

[Fábio Rodrigo]

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.

[David]

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

[Fábio Rodrigo]

Unfortunately, it didn’t work. I tried adding the snippet using the pluginception method.

View post on imgur.com

There’s no cache (localhost server).

The weird thing is that there’s no error either.

[David]

Can you post the code here?

[Fábio Rodrigo]

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.

[David]

In Customizer > General –> Icon Type is this set to SVG ?

[Fábio Rodrigo]

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.

[Fábio Rodrigo]

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.

[David]

Glad to hear you found the issue.

[Author]

Posts