[Resolved] Customize off canvas menu toggle

Home Forums Support [Resolved] Customize off canvas menu toggle

Home Forums Support Customize off canvas menu toggle

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #1523669
    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.

    Customer Support

    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:


    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.

    Customer Support

    Can you post the code here?

    Fábio Rodrigo


    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 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>
        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.

    Customer Support

    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.

    Customer Support

    Glad to hear you found the issue.

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.