reposition hamburger menu

Yes - that filter requires the actual HTML for the SVG to work.

Perhaps this video would help with getting the HTML code for the SVG:
https://youtu.be/wdzFximLiQs

I have found this in https://editor.method.ac/

<svg width="143.12" height="90.39" xmlns="http://www.w3.org/2000/svg">
 <defs>
  <style>.cls-1{fill:#2d0320;}</style>
 </defs>
 <title>Artboard 1</title>
 <g>
  <title>Layer 1</title>
  <path id="svg_1" d="m143.37,6.59c0.54,6.94 -9.93,10.73 -15.54,9.64c-38.91,-2.4 -81.2,2.69 -119.69,-1.66c-20.14,-10.92 2.4,-14.44 16.16,-12.33c18.7,-0.09 51.81,-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.14,43.42c9.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.49,4.36 -80.78,-0.73 -119.69,1.66c-5.61,1.1 -16.09,-2.7 -15.54,-9.64" class="cls-1"/>
  <path id="svg_3" d="m143.37,84.26c-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.11 -36.3,-1.41 -16.16,-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>
</svg>

But still is returning me a critical error to the site!

Hi Leo,
I followed the video instructions but still is returning a critical error to the site!

I use “Safe SVG” plugin. I have disabled it, but still the error returns...

Is there any other route?

Hmm your SVG code should look something like this only:

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-alarm-fill" viewBox="0 0 16 16">
  <path d="M6 .5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1H9v1.07a7.001 7.001 0 0 1 3.274 12.474l.601.602a.5.5 0 0 1-.707.708l-.746-.746A6.97 6.97 0 0 1 8 16a6.97 6.97 0 0 1-3.422-.892l-.746.746a.5.5 0 0 1-.707-.708l.602-.602A7.001 7.001 0 0 1 7 2.07V1h-.5A.5.5 0 0 1 6 .5zm2.5 5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM11.613 1.86a2.5 2.5 0 1 1 3.527 3.527 8.035 8.035 0 0 0-3.527-3.527z"/>
</svg>

Reference: https://icons.getbootstrap.com/icons/alarm-fill/

So try adding this code in and see if that works.

Hi there!

I have added your svg, so my functions.php it looks like this:

add_filter( 'generate_svg_icon', function( $output, $icon ) {
if ( 'menu-bars' === $icon ) {
		$output = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-alarm-fill" viewBox="0 0 16 16">
  <path d="M6 .5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1H9v1.07a7.001 7.001 0 0 1 3.274 12.474l.601.602a.5.5 0 0 1-.707.708l-.746-.746A6.97 6.97 0 0 1 8 16a6.97 6.97 0 0 1-3.422-.892l-.746.746a.5.5 0 0 1-.707-.708l.602-.602A7.001 7.001 0 0 1 7 2.07V1h-.5A.5.5 0 0 1 6 .5zm2.5 5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM11.613 1.86a2.5 2.5 0 1 1 3.527 3.527 8.035 8.035 0 0 0-3.527-3.527z"/>
</svg>';
	}
}15,2);

But still is returning a critical error to the site!

Since I use “Safe SVG” plugin (and I have disabled it, but still the error returns…), can I have any other route? Maybe through CSS (I have a GP child theme)?

Look, I have uploaded the recent content (without the above filter in functions.php, so that the pages render and you can analyse the source code): https://therigathazazen.org.br/

Hi there,

But still is returning a critical error to the site!

Your PHP snippet has a syntax error.

This part - }15,2); - should be },15,2);. It's missing a , between } and 15 that separates the function from the priority value and the args count.

Hi there!
Now there’s no more critical errors, the site loads ok. But the hamburger is not where it should be...

Look, I have uploaded the recent content (with the filter in functions.php): https://therigathazazen.org.br/

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);

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

Hi there,

can i ask you raise a new topic with your SVG coded added to the site so we can take a look at the positioning issue.

Sorry, the homepage is redirecting to Facebook.
I have opened a new topic.
Thank you!