- This topic has 64 replies, 5 voices, and was last updated 5 years ago by
.
-
Posts
-
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.
Customer Support
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,
thanksHi 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,
thanksThey 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
thankWhich 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
thanksi am trying all sort of stuff… wont work
site: http://menuhamburgerstest.s178.upress.link
user: liorsade8
pass: aSqmcZKw4rDCplease help,
thanksThe zip files should going into your child theme’s folder.
Then you can use the
wp_headhook 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-366966Looks 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_headthen 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,
thanksLogin 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/jkt0rhftp screenshot:
http://prntscr.com/jkt20hhooks screenshot:
https://prnt.sc/jkt2kb
- The topic ‘Animated Hamburger Icon’ is closed to new replies.