[Resolved] Animated Hamburger Icon

[Tom]

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>

[liorsade8]

nothing…

[liorsade8]

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

[Tom]

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 🙂

[liorsade8]

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

[Leo]

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

[liorsade8]

hi
sorry,
done.
but still nothing…

[liorsade8]

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…..

[Tom]

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
}

[liorsade8]

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

[liorsade8]

btw – i removed the snippet and put it in the function…
it’s working

[Tom]

Looks great! 🙂

[liorsade8]

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!

[liorsade8]

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&#8221; 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

[liorsade8]

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&#8221; 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

[Author]

Posts