Archived topic
Animated Hamburger Icon
64 replies · Started by Jonathan on May 2, 2018
I have recently moved from the Genesis framework and am trying to work out how to use an animated icon within the mobile part of GP premium as a replacement of the stock mobile icon. See website:
I have done this in Genesis using php, css and javascript but not sure what to replace to change the default menu icon with the animated one.
Hi there,
This thread should help: https://generatepress.com/forums/topic/custom-menu-toggle-hamburger/
Let me know :)
hi tom,
sorry but i dont understand how to do the animated hamburger menu.
for example if i want a spin hamburger icon
how do i do it
what do i put where?
i use child theme.
i use gp premium.
i made a new testing site:
http://menuhamburgerstest.s178.upress.link/
please help,
thanks
Hi there,
Have you found a spin hamburger icon you would like to implement?
hi leo,
the icons from: https://jonsuh.com/hamburgers/
are great.
the spin and Collapse are amazing...
also in future it will be great to know how can i implement others...
but for now these will work fine.
also,
i am using a plugin http://responsive.menu/ PRO which have great icons....
for example a site with generatepress and responsive menu of mine: https://www.aviadi.co.il/
please help,
thanks
They should all slightly different ways of implementing it.
For the icons from https://jonsuh.com/hamburgers/, you need to do step 1 from their website.
Then the rest of the steps should be be here: https://generatepress.com/forums/topic/custom-menu-toggle-hamburger/#post-366966
hi
it's not helping me man...
i dont really know what to do
i try theirs and yours.
please help
thank
Which steps are you stuck on?
Have you completed #1 from the site? "Download and include the CSS in the <head> of your site"
i was meaning the other code... but anyway... i download the zip and what do i put where?
there are lot's of files
like it's a plugin....
help
please
thanks
i am trying all sort of stuff... wont work
site: http://menuhamburgerstest.s178.upress.link
user: liorsade8
pass: aSqmcZKw4rDC
please help,
thanks
The zip files should going into your child theme's folder.
Then you can use the wp_head hook to complete step 1:
https://docs.generatepress.com/article/wp-head/
https://docs.generatepress.com/article/using-hooks/
Then you should be able to add in using Tom's code here:
https://generatepress.com/forums/topic/custom-menu-toggle-hamburger/#post-366966
Looks like you will also need FA5:
https://docs.generatepress.com/article/font-awesome/
hi leo, tom and guys,
thanks but no luck...
guide me please...or log in to the site (i gave u user and pass) or Remote control of my pc and help.
i put the ziped folder in the child theme folder (once the entire folder and once the entier files inside that folder - u didnt mentioned how...)
then i put this code: https://github.com/jonsuh/hamburgers/blob/master/dist/hamburgers.css
in the wp_head
then i put in the functions.php in child theme the code:
add_action( 'generate_inside_mobile_menu', 'tu_hamburger_icon' );
function tu_hamburger_icon() {
?>
<button class="hamburger hamburger--collapse is-active" type="button">
<span class="hamburger-box">
<span class="hamburger-inner">Menu</span>
</span>
<?php
}
also, in the functions.php i put this code as u mentioned:
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">';
}
I DELETE IT ALL
allowing u to do and i'll look.
it's super super super important to me.....
------------------------------
Please don't post private login details in here, as they're public topics.
------------------------------
NOTHING.....
please help,
thanks
Login to the site and complete tasks for users is out of the scope of this support forum unfortunately - You can imagine how much work we will have to do for everybody.
- Try copying the hamburgers-master (1 folder and unzipped) into your child theme folder.
- Then this is the line you need to add in wp_head, not the actual CSS:
<link href="dist/hamburgers.css" rel="stylesheet">
- The FA plugin is also needed in order to use FA5 with the code so make sure you use that.
- Then Tom's code should work in there.
- If all the above steps are done and it still doesn't work, please leave everything in so we can have a look.
Let me know :)
hi leo
i did it but no luck.
1. unziped and put all files in the ftp main folder of generatepress_child or either try to put the entire folder in the generatepress_child.....
right now it's the entire folder zipped in the generatepress_child folder.
2. put this line:
<link href="dist/hamburgers.css" rel="stylesheet">
in wp_head hook.
3.what FA plugin? better font awesome? i installed that.
4.i also put into the functions.php the font awesome 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">';
}
5.i also put into the functions.php the tom's code:
add_action( 'generate_inside_mobile_menu', 'tu_hamburger_icon' );
function tu_hamburger_icon() {
?>
<span class="hamburger-box">
<span class="hamburger-inner">Menu</span>
</span>
<?php
}
also try with this lines in tom's code:
<button class="hamburger hamburger--collapse" type="button">
</button>
-----------------------------------
please help.
site: http://menuhamburgerstest.s178.upress.link/
thanks.
editor screenshot:
https://prnt.sc/jkt0rh
ftp screenshot:
http://prntscr.com/jkt20h
hooks screenshot:
https://prnt.sc/jkt2kb
