Svg menu icon bars fatter

[Juan Jose]

I want to make the svg menu icon bars fatter in mobile, how can I do that?

My web is https://tusredactores.com

Thanks

[Juan Jose]

[Tom]

Hi there,

You can replace the bars SVG with your own using a filter:

add_filter( 'generate_svg_icon_element', function( $output, $icon ) {
    if ( 'menu-bars' === $icon ) {
        $output = 'YOUR SVG HTML HERE';
    }

    return $output;
}, 10, 2 );

Hope this helps 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Juan Jose]

Now the “X” that had disappeared, how can I load an “svg” when the menu is open?

[Juan Jose]

[Leo]

Can you copy and paste the code you are adding here?

Please make sure to click the CODE button in the editor.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Juan Jose]

add_filter( 'generate_svg_icon_element', function( $output, $icon ) {
    if ( 'menu-bars' === $icon ) {
        $output = '<svg viewBox="0 0 100 80" width="40" height="40">
  <rect width="100" height="20"></rect>
  <rect y="30" width="100" height="20"></rect>
  <rect y="60" width="100" height="20"></rect>
</svg>';
    }

    return $output;
}, 10, 2 );

The svg icon changes, but when I open the menu it disappears.

[Tom]

Is there any way we can see this issue on the site? I’m still seeing the old icon.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts