[Support request] Custom SVG hamburger

[Gabriela]

add_filter( 'generate_svg_icon', function( $output, $icon ) {
if ( 'menu-bars' === $icon ) {
		$output = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 143.28 89.32"><defs><style>.cls-1{fill:#2d0320;}</style></defs><title>Hamburger</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M143.25,5.84c.54,6.94-9.93,10.73-15.54,9.64C88.8,13.08,46.51,18.17,8,13.82-12.12,2.9,10.42-.62,24.18,1.49,42.88,1.4,76,.25,94.88.43c16.66,2.36,39.2-5.18,48.37,5.41"/><path class="cls-1" d="M0,42.67c9.17-10.56,31.71-3,48.41-5.41,18.85-.19,52,1,70.66,1.06,13.79-2.07,36.33,1.41,16.16,12.33C96.76,55,54.47,49.92,15.56,52.31,10,53.41-.53,49.61,0,42.67"/><path class="cls-1" d="M143.25,83.51c-9.17,10.56-31.71,3-48.41,5.41-18.85.18-51.95-1-70.66-1.06C10.42,90-12.12,86.45,8,75.53c38.49-4.36,80.78.73,119.69-1.66,5.61-1.1,16.08,2.7,15.54,9.64"/></g></g></svg>';
	}
},15,2);

Hi there!
I have accomplished to put the above filter in functions.php, as you told me in another thread. But the hamburger is not showing up…
Look, I have uploaded the recent content (with the filter in functions.php). Some pages (the homepage is redirecting to Facebook, sorry):

https://therigathazazen.org.br/nossa-ordem/textos-dos-mestres/homenagem-as-mulheres/
https://therigathazazen.org.br/nossa-ordem/

I guess there’s something wrong with my svg (too many paths…) but that’s what Illustrator gave me through “Export for screens”.

This is the svg: https://therigathazazen.org.br/wp-content/uploads/2021/04/therigathazazen.org.br-hamburger.svg

[Elvin]

Hi there,

There are 2 issues with this.

First is, the snippet doesn’t return an icon. The PHP snippet should have return $output.

The other issue is, the SVG file is missing a few attributes.

I’ve attempted to correct both. Try this PHP snippet:

add_filter( 'generate_svg_icon', function( $output, $icon ) {
    if ( 'menu-bars' === $icon ) {
		$output = '<svg viewBox="0 0 143.28 89.32" aria-hidden="true" role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em"><defs><style>.cls-1{fill:#2d0320;}</style></defs><title>Hamburger</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1-2"><path class="cls-1" d="M143.25,5.84c.54,6.94-9.93,10.73-15.54,9.64C88.8,13.08,46.51,18.17,8,13.82-12.12,2.9,10.42-.62,24.18,1.49,42.88,1.4,76,.25,94.88.43c16.66,2.36,39.2-5.18,48.37,5.41"/><path class="cls-1" d="M0,42.67c9.17-10.56,31.71-3,48.41-5.41,18.85-.19,52,1,70.66,1.06,13.79-2.07,36.33,1.41,16.16,12.33C96.76,55,54.47,49.92,15.56,52.31,10,53.41-.53,49.61,0,42.67"/><path class="cls-1" d="M143.25,83.51c-9.17,10.56-31.71,3-48.41,5.41-18.85.18-51.95-1-70.66-1.06C10.42,90-12.12,86.45,8,75.53c38.49-4.36,80.78.73,119.69-1.66,5.61-1.1,16.08,2.7,15.54,9.64"/></g></g></svg>';
        }
	return $output;
},15,2);

Note: Reminder, the SVG you have has fill color embedded in it. You’ll have to change it within the SVG code if you want to change the icon color.

[Gabriela]

Hi there,
Well, I have cleared the cache… and still my hamburger isn’t showing up (I have put 5em for height and width).

By the way… for some pages I have created a Hero, so the hamburger version should be white. Where do I put that snippet?

https://therigathazazen.org.br/nossa-ordem/textos-dos-mestres/homenagem-as-mulheres/
https://therigathazazen.org.br/nossa-ordem/

I will give you a admin login so that you can verify anything you need.

[Gabriela]

Hi Ying!
I am using a child theme!!

This is my functions.php:

<?php
/**
 * Therigatha theme functions and definitions.
 *
 * Add your custom PHP in this file. 
 * Only edit this file if you have direct access to it on your server (to fix errors if they happen).
 */

function generatepress_child_enqueue_scripts() {
	if ( is_rtl() ) {
		wp_enqueue_style( 'generatepress-rtl', trailingslashit( get_template_directory_uri() ) . 'rtl.css' );
	}
}
add_action( 'wp_enqueue_scripts', 'generatepress_child_enqueue_scripts', 100 );

/* Load Child styles after all styles */

add_action( 'wp_enqueue_scripts', 'tu_child_scipts', 999 );
function tu_child_scipts() {
    wp_dequeue_style( 'generate-child' );
    wp_enqueue_style( 'generate-child', get_stylesheet_uri(), array( 'generate-style' ), filemtime( get_stylesheet_directory() . '/style.css' ), 'all' );
}

/* Custom Hamburger */

add_filter( 'generate_svg_icon', function( $output, $icon ) {
    if ( 'menu-bars' === $icon ) {
		$output = '<svg width="143.28" height="89.32" xmlns="http://www.w3.org/2000/svg">
 <defs>
  <style>.cls-1{fill:#2d0320;}</style>
 </defs>
 <title>Hamburger</title>
 <g>
  <title>Layer 1</title>
  <g id="Layer_2">
   <g id="Layer_1-2">
    <path id="svg_1" d="m143.25,5.84c0.54,6.94 -9.93,10.73 -15.54,9.64c-38.91,-2.4 -81.2,2.69 -119.71,-1.66c-20.12,-10.92 2.42,-14.44 16.18,-12.33c18.7,-0.09 51.82,-1.24 70.7,-1.06c16.66,2.36 39.2,-5.18 48.37,5.41" class="cls-1"/>
    <path id="svg_2" d="m0,42.67c9.17,-10.56 31.71,-3 48.41,-5.41c18.85,-0.19 52,1 70.66,1.06c13.79,-2.07 36.33,1.41 16.16,12.33c-38.47,4.35 -80.76,-0.73 -119.67,1.66c-5.56,1.1 -16.09,-2.7 -15.56,-9.64" class="cls-1"/>
    <path id="svg_3" d="m143.25,83.51c-9.17,10.56 -31.71,3 -48.41,5.41c-18.85,0.18 -51.95,-1 -70.66,-1.06c-13.76,2.14 -36.3,-1.41 -16.18,-12.33c38.49,-4.36 80.78,0.73 119.69,-1.66c5.61,-1.1 16.08,2.7 15.54,9.64" class="cls-1"/>
   </g>
  </g>
 </g>
</svg>';
        }
	return $output;
},15,2);

[Ying]

Oops, I’m sorry 😛 Must be the language barrier…

I don’t see the theme editor option (maybe blocked by a security plugin?) I can’t check the content in the functions.php file.

Did you edit the file directly?

Let me know 🙂

[Gabriela]

Hi!
I don’t know why the theme editor was hidden, since in my localhost it is available. Well, I have uploaded an update to the installation, and created a new admin user for you.

Yes, I edit the files directly, I don’t use theme editor, anyway.

https://therigathazazen.org.br/nossa-ordem/textos-dos-mestres/homenagem-as-mulheres/
https://therigathazazen.org.br/nossa-ordem/

[Elvin]

Hi there,

I’ve tried accessing the site with the credentials provided but it didn’t work. Can you recheck and verify if the information provided is correct?

Also, we’ll need to see the contents of the child theme’s functions.php to check why the custom SVG isn’t working on your site. That said, can you do anything about the theme editor not being accessible?

Let us know. 🙂

[Gabriela]

Hi there!
Here are the fixes so that you can access my child theme editor. New password.

By the way, how can I put a white hamburger when in Hero header?
https://therigathazazen.org.br/bem-vindas-e-bem-vindos/
https://therigathazazen.org.br/nossa-ordem/

Here is when hamburger is colored (most cases):
https://therigathazazen.org.br/nossa-ordem/textos-dos-mestres/homenagem-as-mulheres/

This is the svg: https://therigathazazen.org.br/wp-content/uploads/2021/04/therigathazazen.org.br-hamburger.svg

Thank you.

[Elvin]

Not exactly sure what you’re trying to do but I think you don’t need to add the hamburger as a menu item.

If you want the hamburger menu toggle to appear on desktop, simple go to Appearance > Customize > Layout > Primary menu and change the Mobile Menu Breakpoint to a high value. (6000px)

As for the color, I’ve mentioned this before on my reply here:
https://generatepress.com/forums/topic/custom-svg-hamburger/#post-1731933

You’ll have to fix the svg so it doesn’t have a specified fill style.

Currently you have this:

 <defs>
  <style>.cls-1{fill:#2d0320;}</style>
 </defs>

[Gabriela]

Hi!!
I am trying to put a custom hamburger in place of standard hamburger. I already have the standard hamburger menu in all the screen sizes.
https://therigathazazen.org.br/bem-vindas-e-bem-vindos/
https://therigathazazen.org.br/nossa-ordem/

I want my hamburger. This one: https://therigathazazen.org.br/wp-content/uploads/2021/04/therigathazazen.org.br-hamburger.svg
Most pages will display this ☝ one. And I want to put the same but white filled for the Hero pages.

At the moment I have this filter you have suggested me in functions.php, but didn’t work:

/* Custom Hamburger */

add_filter( 'generate_svg_icon', function( $output, $icon ) {
    if ( 'menu-bars' === $icon ) {
		$output = '<svg width="143.28" height="89.32" xmlns="http://www.w3.org/2000/svg">
 <defs>
  <style>.cls-1{fill:#2d0320;}</style>
 </defs>
 <title>Hamburger</title>
 <g>
  <title>Layer 1</title>
  <g id="Layer_2">
   <g id="Layer_1-2">
    <path id="svg_1" d="m143.25,5.84c0.54,6.94 -9.93,10.73 -15.54,9.64c-38.91,-2.4 -81.2,2.69 -119.71,-1.66c-20.12,-10.92 2.42,-14.44 16.18,-12.33c18.7,-0.09 51.82,-1.24 70.7,-1.06c16.66,2.36 39.2,-5.18 48.37,5.41" class="cls-1"/>
    <path id="svg_2" d="m0,42.67c9.17,-10.56 31.71,-3 48.41,-5.41c18.85,-0.19 52,1 70.66,1.06c13.79,-2.07 36.33,1.41 16.16,12.33c-38.47,4.35 -80.76,-0.73 -119.67,1.66c-5.56,1.1 -16.09,-2.7 -15.56,-9.64" class="cls-1"/>
    <path id="svg_3" d="m143.25,83.51c-9.17,10.56 -31.71,3 -48.41,5.41c-18.85,0.18 -51.95,-1 -70.66,-1.06c-13.76,2.14 -36.3,-1.41 -16.18,-12.33c38.49,-4.36 80.78,0.73 119.69,-1.66c5.61,-1.1 16.08,2.7 15.54,9.64" class="cls-1"/>
   </g>
  </g>
 </g>
</svg>';
        }
	return $output;
},15,2);

Thank you!

[Tom]

Hi there,

I’m not able to see the custom SVG (page not found), but that filter won’t work as you’re using the font icon option right now.

Go to “Customize > General” and change the icon type to “SVG”.

That should fix it.

[Sergio]

Hi

I want to change the default burger icon by another one.

In order to try this, I am using this code suggested by Elvin but doesn´t work:

add_filter( 'generate_svg_icon', function( $output, $icon ) {
    if ( 'menu-bars' === $icon ) {
		$output = '<svg viewBox="0 0 143.28 89.32" aria-hidden="true" role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em"><defs><style>.cls-1{fill:#2d0320;}</style></defs><title>Hamburger</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1-2"><path class="cls-1" d="M143.25,5.84c.54,6.94-9.93,10.73-15.54,9.64C88.8,13.08,46.51,18.17,8,13.82-12.12,2.9,10.42-.62,24.18,1.49,42.88,1.4,76,.25,94.88.43c16.66,2.36,39.2-5.18,48.37,5.41"/><path class="cls-1" d="M0,42.67c9.17-10.56,31.71-3,48.41-5.41,18.85-.19,52,1,70.66,1.06,13.79-2.07,36.33,1.41,16.16,12.33C96.76,55,54.47,49.92,15.56,52.31,10,53.41-.53,49.61,0,42.67"/><path class="cls-1" d="M143.25,83.51c-9.17,10.56-31.71,3-48.41,5.41-18.85.18-51.95-1-70.66-1.06C10.42,90-12.12,86.45,8,75.53c38.49-4.36,80.78.73,119.69-1.66,5.61-1.1,16.08,2.7,15.54,9.64"/></g></g></svg>';
        }
	return $output;
},15,2);

Web: https://ainhoaibarreche.com/

Thanks in advance

[David]

Hi there,

change this line:
if ( 'menu-bars' === $icon ) {

to:
if ( 'pro-menu-bars' === $icon ) {

This is required as you’re using the Off Canvas panel so it uses the pro icons added by GP premium

[Sergio]

Thank you David
It works perfectly!

[David]

You’re welcome

[Author]

Posts