[Resolved] reposition hamburger menu

Home Forums Support reposition hamburger menu

  • This topic has 23 replies, 5 voices, and was last updated 1 week ago by Gabriela.
Viewing 9 posts - 16 through 24 (of 24 total)
  • Author
    Posts
  • #1722536
    Leo
    Staff
    Customer Support

    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:

    #1722553
    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!

    #1722568
    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?

    #1722626
    Leo
    Staff
    Customer Support

    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.

    #1725048
    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/

    #1725655
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1728205
    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

    #1728466
    David
    Staff
    Customer Support

    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.

    #1731786
    Gabriela

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

Viewing 9 posts - 16 through 24 (of 24 total)
  • You must be logged in to reply to this topic.