Animated Hamburger Icon

The element exists on your page now, so we're getting closer.

Now they say to add this javascript. You can add it into the "wp_footer" hook inside GP Hooks:

<script>
  // Look for .hamburger
  var hamburger = document.querySelector(".hamburger");
  var menuToggle = document.querySelector( '.menu-toggle' );
  // On click
  menuToggle.addEventListener("click", function() {
    // Toggle class "is-active"
    hamburger.classList.toggle("is-active");
    // Do something else, like open/close menu
  });
</script>

nothing...

please please please tom - try it in your test empty site
and let us (generatepress see the code for success)...
i'm sure the way we do it now isnt good - maybe some mistakes i make or so....
please update,
thanks

We're actually really close to getting it to work on your site. However, the HTML has disappeared again. Did you change anything?

I know it's a lot of back and forth, but we're close to having it solved, we just need to HTML to stay in place :)

hi tom,
everything is the same... didnt do something....
here is the print screen of the system:

snippet screenshot:
https://prnt.sc/jmlgjf

editor screenshot:
https://prnt.sc/jmlhzg

ftp screenshot:
https://prnt.sc/jmlidp

hooks screenshot:
https://prnt.sc/jmlhnz

css screenshot:
https://prnt.sc/jmlhjp

also,
as i said - i can give you code / ftp / access to the site...
please update,
thanks

The javascript should be in wp_footer hook as per Tom's suggestion here:
https://generatepress.com/forums/topic/animated-hamburger-icon/page/3/#post-583152

hi
sorry,
done.
but still nothing...

by the way.... with this code in the snippet

add_action( ‘generate_inside_mobile_menu’, ‘tu_hamburger_icon’ );
function tu_hamburger_icon() {
?>
    <div class="hamburger hamburger--collapse">
        <div class="hamburger-box">
            <div class="hamburger-inner"></div>
        </div>
    </div>
<?php
}

it doesnt even show a menu in mobile.....

Ahh, you have some funky quotes in there.

Use this instead:

add_action( 'generate_inside_mobile_menu', 'tu_hamburger_icon' );
function tu_hamburger_icon() {
?>
    <div class="hamburger hamburger--collapse">
        <div class="hamburger-box">
            <div class="hamburger-inner"></div>
        </div>
    </div>
<?php
}

OMMMMMMMMMMMMMMGGGGGGGGGGGGG
tom u are friiikkkking amazing!
it's working!
take a loooook

btw - i removed the snippet and put it in the function...
it's working

Looks great! :)

yes. you are the best guys!!
i think you should put an article or something to u'r users about it - it's upgrading everything!

also,
now i'll try to put text near it (MENU) and float left right and tweak it...
thanks for now!

hi tom,
few things:

1.
i removed the code for font awesome in the functions.php
and it's still working... so why should i keep the code?

add_action( 'wp_head', 'tu_font_awesome_css' );
function tu_font_awesome_css() {
echo '<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">';
}

also turned off better font awesome.... and it's working...
so why should i keep the code... or not?

2. it's working once i have normal pages in the site... and not a one page scrolling site - take a look at mobile... press and once you open it and press a page (scrolling in section 2 or 3 for example) the hamburger doesnt goes back to none active.... and press few times - u will see it's messing it all up ...
do u know the code for bringing it back?

thanks

hi,
also another question:
what is better? to put this code into the gp-hooks:

<link href="http://menuhamburgerstest.s178.upress.link/wp-content/themes/generatepress_child/dist/hamburgers.css" rel="stylesheet">

or to put the entire css
all of what's in here:
https://github.com/jonsuh/hamburgers/blob/master/dist/hamburgers.css
in the css in the site?

are they the same?
which will load faster or downgrade the site in speed ranks and stuff
or it doesnt matter?

thanks