- This topic has 12 replies, 4 voices, and was last updated 4 years, 11 months ago by Tom.
-
AuthorPosts
-
April 16, 2019 at 12:33 am #870163Mårten
I try to add animation to the hamburger menu from https://jonsuh.com/hamburgers/
I have insert the files in the Generate Press Child folder.
Added CSS code:
.menu-toggle .mobile-menu, .menu-toggle:before { display: none; }
Added function:
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 }
AND
add_action( 'wp_enqueue_scripts', 'tu_load_font_awesome' ); /** * Enqueue Font Awesome. */ function tu_load_font_awesome() { wp_enqueue_style( 'font-awesome', '//use.fontawesome.com/releases/v5.5.0/css/all.css', array(), '5.5.0' ); }
Installed the Font Awesome 5 plugin.
Add script in wp footer iv Elements:
<script> var hamburger = document.querySelector(".hamburger"), menuToggle = document.querySelector( '.menu-toggle' ), menuItems = document.querySelectorAll( 'nav ul a' ), closeElements = document.querySelectorAll( '.slideout-overlay, .slider-exit a' ); menuToggle.addEventListener("click", function() { hamburger.classList.toggle("is-active"); } ); for ( var i = 0; i < closeElements.length; i++ ) { closeElements[i].addEventListener( 'click', function( e ) { hamburger.classList.toggle("is-active"); } ); }; for ( var i = 0; i < menuItems.length; i++ ) { menuItems[i].addEventListener( 'click', function( e ) { var closest_nav = this.closest( 'nav' ); if ( closest_nav.classList.contains( 'toggled' ) || htmlEl.classList.contains( 'slide-opened' ) ) { var url = this.getAttribute( 'href' ); var hash = url.split('#')[1]; // Open the sub-menu if the link has no destination if ( hash ) { e.preventDefault(); hamburger.classList.toggle("is-active"); } } }, false ); } </script>
Added in wp head via Elements:
<link href=”http://www2.resvillemathantverk.se/wp-content/themes/generatepress_child/dist/hamburgers.css” rel=”stylesheet”>
Do you possibly have any idea what has gone wrong? 🙂
Thanks
April 16, 2019 at 8:58 am #870703LeoStaffCustomer SupportHi there,
Can you take a look at this (long) post and see if everything is done correctly?
https://generatepress.com/forums/topic/animated-hamburger-icon/
https://gist.github.com/generatepress/589b9e91bca7205883b0454f15a4dcf9Let me know 🙂
April 16, 2019 at 10:36 pm #871127MårtenI have followed that post and commented but Tom asked me to create a new thread … 🙂
What I can see, I have done everything right.April 17, 2019 at 10:19 am #871816TomLead DeveloperLead DeveloperI’m not seeing the
hamburger
element inside your menu toggle. How are you adding that function currently?April 24, 2019 at 10:03 pm #878485MårtenHmm I don’t know. I just followed the previous post about the same issue. Where do I add that function?
April 25, 2019 at 2:22 am #878769DavidStaffCustomer SupportHi there,
this article explains how you can add PHP ( functions ):
April 25, 2019 at 3:47 am #878844MårtenOh ok. I’ve already added the function in Code Snippet. Please see screenshot.
April 25, 2019 at 4:35 pm #879775TomLead DeveloperLead DeveloperAre you wanting hamburger to be on desktop or mobile? Or both?
On desktop, you’re using the regular off canvas toggle, so the above code would need to be completely re-worked (not 100% it’s possible yet).
On mobile, the off canvas panel covers the menu toggle, so the animation wouldn’t be visible.
Let me know 🙂
April 30, 2019 at 1:05 am #883976MårtenI want the hamburger on both desktop and mobile.
Please help me, i thought i did everything right. But clearly not! 🙁April 30, 2019 at 8:41 am #884527TomLead DeveloperLead DeveloperUnfortunately, it’s a pretty complex thing, as those animated menus use multiple elements and transitions. I’ll see if I can write something up for you today.
April 30, 2019 at 2:57 pm #884890TomLead DeveloperLead DeveloperAlright, not easy but I have something working.
Notes:
1. This requires the off canvas panel to be set to “On”.
2. The mobile header must be active.First, add these functions:
add_action( 'generate_inside_navigation', 'tu_add_hamburger' ); add_action( 'generate_inside_mobile_header', 'tu_add_hamburger' ); function tu_add_hamburger() { if ( 'generate_inside_mobile_header' === current_action() ) { echo '<div class="mobile-bar-items">'; } ?> <div class="hamburger hamburger--collapse"> <div class="hamburger-box"> <div class="hamburger-inner"></div> </div> </div> <?php if ( 'generate_inside_mobile_header' === current_action() ) { echo '</div>'; } } add_action( 'wp_enqueue_scripts', function() { $script = 'var hamburgers = document.querySelectorAll( ".hamburger" ), closeElements = document.querySelectorAll( ".slideout-overlay, .slideout-exit" ); for ( var h = 0; h < hamburgers.length; h++ ) { hamburgers[h].addEventListener( "click", function( e ) { generateOffside.open(); this.classList.add("is-active"); } ); }; for ( var e = 0; e < closeElements.length; e++ ) { closeElements[e].addEventListener( "click", function( e ) { for ( var h = 0; h < hamburgers.length; h++ ) { hamburgers[h].classList.remove("is-active"); }; } ); };'; wp_add_inline_script( 'generate-offside', $script ); } );
Now add this CSS:
.hamburger { float: right; order: 100; padding: 0 20px; margin-top: 15px; } .hamburger-box { width: 20px; height: 12px; } .hamburger-inner, .hamburger-inner:after, .hamburger-inner:before { width: 20px; height: 2px; } .hamburger-inner:before { top: -5px; } .hamburger-inner:after { bottom: -5px; } .hamburger--collapse .hamburger-inner:after { top: -10px; } .hamburger-inner, .hamburger-inner:after, .hamburger-inner:before, .hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner:after, .hamburger.is-active .hamburger-inner:before { background-color: #fff; } #mobile-header .menu-toggle, li.slideout-toggle { display: none; } .hamburger--collapse.is-active .hamburger-inner { transform: translate3d(0,-5px,0) rotate(-45deg); }
May 2, 2019 at 9:49 pm #887344MårtenThank you!
It looks like we are getting closer! 🙂The original hamburger appears in sticky navigation and mobile version. The menu does not appear when i click on the new hamburger.
May 3, 2019 at 1:27 pm #888303TomLead DeveloperLead DeveloperI just updated the javascript – can you try re-adding it?
I’m also not seeing the CSS added – how did you add it?
-
AuthorPosts
- You must be logged in to reply to this topic.