[Resolved] Change SVG by clicking on the button

[Benny]

Hey there, is it possible to change the burger sticks to a cross if i open the overlay? You can see what i mean if you click the menu button –> http://app-gulgowski.2xaf1tm1wr-rz83ynk206d7.p.temp-site.link/

I built the bar at the top manually and took a generateblocks button with the sticks as svg. So i thought maybe i could simply change the svg within the css if the overlay is opened.

Sincerely Benny

[David]

Hi there,

you would need to swap the icon for one that contains 2 x SVGS, one for the open ( hamburger ) and one for the close ( X ) using the generate_svg_icon – heres an example of that code, that has the themes hamburger and close icons:

add_filter( 'generate_svg_icon', function( $output, $icon ) {
    if ( 'pro-menu-bars' === $icon ) {
        $svg = '<svg viewBox="0 0 512 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path d="M0 96c0-13.255 10.745-24 24-24h464c13.255 0 24 10.745 24 24s-10.745 24-24 24H24c-13.255 0-24-10.745-24-24zm0 160c0-13.255 10.745-24 24-24h464c13.255 0 24 10.745 24 24s-10.745 24-24 24H24c-13.255 0-24-10.745-24-24zm0 160c0-13.255 10.745-24 24-24h464c13.255 0 24 10.745 24 24s-10.745 24-24 24H24c-13.255 0-24-10.745-24-24z" /></svg>
        <svg viewBox="0 0 512 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path d="M71.029 71.029c9.373-9.372 24.569-9.372 33.942 0L256 222.059l151.029-151.03c9.373-9.372 24.569-9.372 33.942 0 9.372 9.373 9.372 24.569 0 33.942L289.941 256l151.03 151.029c9.372 9.373 9.372 24.569 0 33.942-9.373 9.372-24.569 9.372-33.942 0L256 289.941l-151.029 151.03c-9.373 9.372-24.569 9.372-33.942 0-9.372-9.373-9.372-24.569 0-33.942L222.059 256 71.029 104.971c-9.372-9.373-9.372-24.569 0-33.942z" /></svg>';

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

    return $output;
}, 15, 2 );

Then you can use some CSS to hide show the relevant one:

html.slide-opened .slideout-toggle .gp-icon svg:first-of-type,
html:not(.slide-opened) .slideout-toggle .gp-icon svg:last-of-type {
    display: none;
}

[Benny]

This looks good but i used an Generateblocks element to built the navbar and i added a generateblocks button with text + svg . How can i change the svg of this button?

Thank you!

[David]

In the GB Button -> Icon. Include the 2 x SVG codes in their. It should work.

[Benny]

Works like charm <3

Thank you again!

[David]

Awesome – glad to hear that!!

[Author]

Posts