[Resolved] reposition hamburger menu

[Leo]

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:

[Gabriela]

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!

[Gabriela]

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?

[Leo]

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.

[Gabriela]

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/

[Elvin]

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.

[Gabriela]

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

[David]

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.

[Gabriela]

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

[Author]

Posts