Archived topic
Change SVG by clicking on the button
5 replies · Started by Benny on December 2, 2022
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
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;
}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!
In the GB Button -> Icon. Include the 2 x SVG codes in their. It should work.
Works like charm <3
Thank you again!
Awesome - glad to hear that!!
