Mobile toggle menu is not closing while clicking outside

  • Resolved achates

    (@achates)


    2 years, 8 months ago

    Hello there,
    Thanks in advance for the help!

    The main issue I’m facing with the mobile toggle menu is not closing while clicking outside of the menu item or outside of the menu.

    I found a fix by searching your support threads but the main problem with this fix is when the menu has sub-menu items under a menu item, it closes without showing the submenu items when you again click on the toggle menu it shows the menu again with the submenu items opened.
    Here’s the code from the thread’s support I found

    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' );
    • This topic was modified 2 years, 8 months ago by achates.
    • This topic was modified 2 years, 8 months ago by achates.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hello?? @achates

    Thanks for providing the URL.

    We have asked the developers to check the custom code. Please lend us some time so the developer can trace the issue and get back to you.

    Have a nice day! Stay safe!

    Thread Starter achates

    (@achates)

    Hello @bsfrahul
    Thanks for the reply.
    Did you found the fix for the problem mentioned above? I guess that is a simple fix, could you please look on it.

    I’m waiting for your reply.

    Regards,

    Hello @achates,

    Thank you for getting back to me! I double-checked that the code was not added to the plugin. Please utilize the custom code you supplied before if you need that functionality.

    Have a wonderful day ahead of you.

    Plugin Support bsfankusht

    (@iankusht)

    Hello @achates,

    Thanks for your patience.

    Kindly try using the following code once.

    (function ($) {
            const $menu = $('.hfe-nav-menu');

            $(document).mouseup(e => {
            if (!$menu.is(e.target) // if the target of the click isn't the container...
            && $menu.has(e.target).length === 0) // ... nor a descendant of the container
            {
                if($('.hfe-nav-menu__toggle').hasClass('hfe-active-menu') && $('.hfe-nav-menu nav').hasClass('menu-is-active')){
                    $('.hfe-nav-menu__toggle').trigger('click');
                }

                if($('.hfe-has-submenu-container').hasClass('sub-menu-active') && $('.hfe-has-submenu-container').parent().find('ul.sub-menu').hasClass('sub-menu-open')){
                    $('.hfe-menu-toggle').trigger('click');
                }
            }
            });
       })(jQuery);

    Have a wonderful day ahead of you.

    • This reply was modified 2 years, 7 months ago by bsfankusht.
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Mobile toggle menu is not closing while clicking outside’ is closed to new replies.