[Resolved] Off canvas panel not showing up

[Antonio]

Hello,
I did the following:

1) added the following code to the function.php file of the child theme:

add_filter( 'generate_svg_icon', function( $output, $icon ) {
    if ( 'menu-bars' === $icon ) {
        $svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 91.9 61.2" style="enable-background:new 0 0 91.9 61.2" xml:space="preserve"><path d="M30.6 30.6h30.6v30.6H30.6zM0 0h30.6v30.6H0zm61.3 0h30.6v30.6H61.3z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#fff"/></svg>';

        return sprintf(
            '<span class="gp-icon %1$s">
                %2$s
            </span>',
            $icon,
            $svg
        );
    }

    return $output;
}, 15, 2 );

2) Moved to Customizer > Layout > Off Canvas Panel and set the Offcanvas panel this way: https://prnt.sc/p1wmVoJvax1w
3) Moved to Appearence > Menu and did the following: https://prnt.sc/mi9HGtrhFfH0
3) modify the header element as follows: https://prnt.sc/yDB9d9mraQX9

Still I see the full menu and can’t see the SVG icon: https://prnt.sc/TlyaTjqzARBX

Where am I wrong?
Thank you

[Ying]

1. If you keep using the block element - site header, the off-canvas panel can not be opened.

2. The navigation block you added to the element is a WP core block, it’s not related to GP’s off canvas panel.

Can you follow the below steps?

1) disable the block element - site header, use the default GP header instead.
2) set the off canvas menu to onat customzier > layout > off canvas panel.
3) change Fernando’s code menu-bars to pro-menu-bars.

Let me know!

[Antonio]

Hello,
done it, but still there are some problems:

1) SVG icon is not the one I’ve set: https://prnt.sc/gH0Qg5BdgTNt

Here’s the code:

add_filter( 'generate_svg_icon', function( $output, $icon ) {
    if ( 'pro-menu-bars' === $icon ) {
        $svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 91.9 61.2" style="enable-background:new 0 0 91.9 61.2" xml:space="preserve"><path d="M30.6 30.6h30.6v30.6H30.6zM0 0h30.6v30.6H0zm61.3 0h30.6v30.6H61.3z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#fff"/></svg>';

        return sprintf(
            '<span class="gp-icon %1$s">
                %2$s
            </span>',
            $icon,
            $svg
        );
    }

    return $output;
}, 15, 2 );

2) color settings are not working: https://prnt.sc/Lz9cwdi7cMDN

Also: is there a way to show the Tagline of the Site title?

Thank you

[Fernando]

Try this code:

add_filter( 'generate_svg_icon', function( $output, $icon ) {
    if ( 'pro-menu-bars' === $icon ) {
        $svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 91.9 61.2" style="enable-background:new 0 0 91.9 61.2" xml:space="preserve"><path d="M30.6 30.6h30.6v30.6H30.6zM0 0h30.6v30.6H0zm61.3 0h30.6v30.6H61.3z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#fff"/></svg>';

        return sprintf(
            '<span class="gp-icon %1$s">
                %2$s
            </span>',
            $icon,
            $svg
        );
    }

    return $output;
}, 15, 2 );

Tested this on my site and it’s working.

Try clearing cache after adding this. If that doesn’t work, try adding it through Code Snippets as well.

[Antonio]

Hello,
the code you sent me was exactly the same as the one I was using. Can you please login to the website and check the issue?
Thank you

[Fernando]

I see. Can you try this instead?:

add_filter( 'generate_svg_icon', function( $output, $icon ) {
    if ( 'menu-bars' === $icon ) {
        $svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 91.9 61.2" style="enable-background:new 0 0 91.9 61.2" xml:space="preserve"><path d="M30.6 30.6h30.6v30.6H30.6zM0 0h30.6v30.6H0zm61.3 0h30.6v30.6H61.3z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#fff"/></svg>';

        return sprintf(
            '<span class="gp-icon %1$s">
                %2$s
            </span>',
            $icon,
            $svg
        );
    }

    return $output;
}, 15, 2 );

[Antonio]

Same.

Can you please login to the website and check the issue?

[Fernando]

I see. I updated the code above. Can you try that instead?: https://generatepress.com/forums/topic/off-canvas-panel-not-showing-up/page/2/#post-2333535

[Antonio]

It works.

I still have the following issue:

2) color settings are not working: https://prnt.sc/Lz9cwdi7cMDN

Thank you

[Fernando]

Try changing the colors in the Primary Navigation colors.

[Antonio]

Works now, thank you!

[Fernando]

You’re welcome Antonio!

[Author]

Posts