close mobile hamburger menu on click outside

Hello @eegg,

Thanks for providing the website link.

I have checked the navigation menu on mobile and the drop-down area closes after we click the menu items.

Here is the video recorded for the same: https://share.getcloudapp.com/X6uoy9yy

Please confirm the same and let us know for further help.

Regards,
Rahul.

Hi Team Brainstorm Force,
first, thanks a lot for you plugin, it’s really powerfull !
I’m using your Header, Footer & Blocks Template plugin and I’ve the same issue. For myself, the drop down menu doesn’t automatically close after clicking a link (surely because it’s only anchor links)
I searched everywhere, there is no option about this case.
Could you help me?
My website can temporarily being seen at https://www.test2020.vagarem.fr/ensemble

Best regards
Mat

Hello @mathiross

The website link provided does not work.

Here is the screenshot for the same.

Please let us know the correct link so we can check the exact requirement.

Looking forward to hearing from you.

Regards,
Rahul.

Sorry ! You’re right, I’m actually struggling with migration issues…. You can see this same link here now : https://www.vagarem.fr/ensemble/
When you come in smartphone view, the hamburger menu doesn’t want to close by it self because it’s only anchored link.

Thanks for your help!
regards,
Mathieu

Hi, i made this script to solve this problem:

jQuery(document).ready(function( $ ){
    $(".menu-item").click(function() {  //use a class, since your ID gets mangled
    $(".hfe-nav-menu__layout-vertical").toggleClass("menu-is-active");      //add the class to the clicked element
    $(".hfe-nav-menu-icon i").removeClass("fa-minus").addClass("fa-bars");
    $(".hfe-nav-menu__toggle").toggleClass("hfe-active-menu hfe-active-menu-full-width"); 
    $(".hfe-nav-menu__toggle").attr("aria-expanded","false");
  });
});

Hi Eegg ! thanks a lot, I’m looking forward to try it! Unfortunately, I’m quite new in wordpress, could you explain a bit more the procedure ? May I replace something or just add this code, and where exactly?
Thanks in advance,

All the best

Mathieu

Hi ! Somebody to help me to implement the code from Eegg?

Hello @mathiross,

Thank you for getting in touch!

Please add the below snippet in your active child theme’s functions.php file —

function custom_script() {
	?>
		<script type="text/javascript">
			jQuery(function($) {
				jQuery(document).ready(function( $ ){
				    $(".menu-item").click(function() {  //use a class, since your ID gets mangled
					    $(".hfe-nav-menu__layout-vertical").toggleClass("menu-is-active");      //add the class to the clicked element
					    $(".hfe-nav-menu-icon i").removeClass("fa-minus").addClass("fa-bars");
					    $(".hfe-nav-menu__toggle").toggleClass("hfe-active-menu hfe-active-menu-full-width"); 
					    $(".hfe-nav-menu__toggle").attr("aria-expanded","false");
					});
				});
			});
		</script>
	<?php
}
add_action( 'wp_footer', 'custom_script' );

Please let us know if this does not help. We will be happy to assist further.

Regards,
Prajakta

• This reply was modified 4 years, 6 months ago by Team Brainstorm Force.

Hi Brainstorm team,
thanks a lot for your help, it’s not working but I ‘m not sure I made everything right.
What I exactly did:
-I created a child theme with Child Theme Configurator.
-I selected it and I edited it: in functions.php, I added the code.

It didn’t work at this moment, then I tried to add “menu-is-active” once to the ID CSS, and after to the classes CSS of the menu. here is a screenshot

Tell me if I’m wrong…

You can check the concerned website: https://www.vagarem.fr/ensemble/

Regards,

Mathieu

Hello @mathiross,

Could you please check if adding the below snippet to your active child theme’s functions.php helps? —

function custom_script() {
	?>
		<script type="text/javascript">
			jQuery(function($) {
				$( document ).click( function( e ){

					if( 'fas fa-align-justify' != $( e.target ).attr( 'class') ) {
						
						var id = $( '.elementor-widget-navigation-menu' ).data( 'id' );

						if( window.matchMedia( "( max-width: 767px )" ).matches ){

							var $this = $( '.elementor-element-' + id + ' .hfe-nav-menu-icon' );
							var $selector = $this.parent().next();

							if ( $this.parent().hasClass( 'hfe-active-menu' ) ) {

								var layout = $( '.elementor-element-' + id + ' .hfe-nav-menu' ).data( 'layout' );
								var full_width = $selector.data( 'full-width' );
								var toggle_icon = $( '.elementor-element-' + id + ' nav' ).data( 'toggle-icon' );

								$( '.elementor-element-' + id).find( '.hfe-nav-menu-icon' ).html( toggle_icon );

								$this.parent().removeClass( 'hfe-active-menu' );
								$this.parent().attr( 'aria-expanded', 'false' );
								
								if ( 'yes' == full_width ){

									$this.removeClass( 'hfe-active-menu-full-width' );
								
									$selector.css( 'width', 'auto' );
									$selector.css( 'left', '0' );
									$selector.css( 'z-index', '0' );
								}				
							} 		
						}
					}
				});	
			});
		</script>
	<?php
}
add_action( 'wp_footer', 'custom_script' );

Please let me know if this still does not help.

Hi!
I put this code in the functons.php of the child theme (I had to remove the previous code you sent me because it was written there was a conflict)

What I see know: It’s working perfectly only when I’m logged in. On private browsing and on a smartphone, it’s like before: the menu doesn’t contract by itself.
Maybe it’s a security issue? (I’m using the ithemes security plugin)

Do I have to write something in the ID CSS or the classes CSS of the concerned menu?

Thanks again for you patience.

you run this script before jquery is being imported. thats why it works works only when you’re logged in.

Please try this:

wp_enqueue_script('jquery');

function custom_script() {
	?>
		<script type="text/javascript">
 			jQuery(document).ready(function($) {			

				$( document ).click( function( e ){

					if( 'fas fa-align-justify' != $( e.target ).attr( 'class') ) {
						
						var id = $( '.elementor-widget-navigation-menu' ).data( 'id' );

						if( window.matchMedia( "( max-width: 767px )" ).matches ){

							var $this = $( '.elementor-element-' + id + ' .hfe-nav-menu-icon' );
							var $selector = $this.parent().next();

							if ( $this.parent().hasClass( 'hfe-active-menu' ) ) {

								var layout = $( '.elementor-element-' + id + ' .hfe-nav-menu' ).data( 'layout' );
								var full_width = $selector.data( 'full-width' );
								var toggle_icon = $( '.elementor-element-' + id + ' nav' ).data( 'toggle-icon' );

								$( '.elementor-element-' + id).find( '.hfe-nav-menu-icon' ).html( toggle_icon );

								$this.parent().removeClass( 'hfe-active-menu' );
								$this.parent().attr( 'aria-expanded', 'false' );
								
								if ( 'yes' == full_width ){

									$this.removeClass( 'hfe-active-menu-full-width' );
								
									$selector.css( 'width', 'auto' );
									$selector.css( 'left', '0' );
									$selector.css( 'z-index', '0' );
								}				
							} 		
						}
					}
				});	
			});
		</script>
	<?php
}
add_action( 'wp_footer', 'custom_script' );

Hi guys !!
I’m happy it’s working perfectly now.
Thanks @brainstormteam, thanks @eegg !
Hope it will help others
All the best !

Mat’

Hello @mathiross,

I am glad that we could help!

Thank you @eegg for your assistance :).

Please do not hesitate to get back to us if you need help with anything else.

Have a great day ahead!

Regards,
Prajakta