Viewing 29 posts - 1 through 29 (of 29 total)
  • Author
    Posts
  • #864438

    Hi,

    for reasons of usability optimization I want to let the mobile menu close after a user clicks on an active menu element. For example: Am I on the subpage “video” and the user opens the mobile main menu and clicks on “video” as well, the menu simply does not react. It would be a little bit smarter when the menu get closed.

    Thanks,
    Marcel

    #864643

    Maybe someone will figure out a way to optimize that?

    #864834

    Hi Mathuseo,

    Well, on one hand it seems to be smarter like this. On the other hand, I have a few more seconds as a user to click on another menu item if I changed my mind. And the menu has a bug at this point, but it will be fixed in the upcoming release, and some people like to have the submenu to open on click, so we have an opening, not closing function. You can do the customization if you like, but we have to wait for the menu “update”.

    Let me know what you think.
    Best regards,
    Victoria

    #864868

    Hi Victoria,

    thanks for your Informations. We did some usability tests and they said, most of the people who enter a subpage by Google (Social Network, …) and are in the use case we discuss, are confused and think something technical is wrong.

    Do you know what JS- (or CSS-function) is called for closing the mobile menu?

    Thanks,
    Marcel

    #865442

    Maybe someone with an idea? I did not think that it is that difficult.

    #866039

    Hi,

    Please add the following script in the functions.php file to close the mobile menu when an active menu item is clicked.

    // custom script
    add_action( 'wp_footer', 'ava_custom_script' );
    function ava_custom_script() {
    ?>
    <script type="text/javascript">
    (function($) {
      function a() {
          $('#av-burger-menu-ul').on('click', '.av-active-burger-items', function (e) {
              var loc, cur;
              loc = window.location.href.match(/(^[^#]*)/)[0];
              cur = $(this).find('a').attr('href');
              e.preventDefault();
    
              if( cur == loc ) {
                  $('.av-hamburger').removeClass('is-active');
                  $('html').removeClass('av-burger-overlay-active');
                  $('html').removeClass('av-burger-overlay-active-delayed');
                  $('.av-burger-overlay').css({ 'display' : 'none', 'opacity' : 0 });
              }
          });
      }
    
      a();
    })(jQuery);
    </script>
    <?php
    }

    Remove browser/plugin cache or hard refresh before checking the page.

    Best regards,
    Ismael

    #866073

    Hi Ismael,

    thanks for your help. Unfortunately the code does not work for me (all caches are deleted). Any idea why?

    Best Regards,
    Marcel

    #866658

    Hi @ismael, any idea why it does not work for me?

    Thanks,
    Marcel

    #866925

    Hi,

    It is working properly on my installation. I forgot to ask you to remove the “#top” anchor from every menu items. Please post the login details in the private field and make sure that the Appearance > Editor panel is accessible so that we can test the script.

    Best regards,
    Ismael

    #869144

    Hi Ismael,

    not sure how to remove #top from active menu item. That thread didn’t help to me: https://kriesi.at/support/topic/remove-top-anchor-from-current-menu-item/

    You can find login details in private content. Editor is accessible.

    Thanks,
    Marcel

    #869966

    Hi,

    Please remove the previous code. Upgrade to version 4.2 then edit the js > avia.js file. Look for the “toggle_submenu” function around line 1951. Replace the function with the following code.

    function toggle_submenu( menu, e )
    		{
    			e.preventDefault();
    			e.stopImmediatePropagation();
    
          var loc, cur;
          loc = window.location.href.match(/(^[^#]*)/)[0];
          cur = menu.attr('href').match(/(^[^#]*)/)[0];
    
          if( cur == loc ) {
              burger.parents('a').eq(0).trigger('click');
          }
    
    			var parent  = menu.parents('li').eq(0);
    
    			parent.toggleClass('av-show-submenu');
    
    			if(parent.is('.av-show-submenu'))
    			{
    				parent.children("ul.sub-menu").slideDown('fast');
    			}
    			else
    			{
    				parent.children("ul.sub-menu").slideUp('fast');
    			}
    		};
    

    Please don’t forget to remove the browser cache before checking the page again.

    Best regards,
    Ismael

    #870048

    I applied this fix, but seems not to work. It is also only focussed on submenu’s? While the same problem is applicable too at main menu level.

    Unfortunately I only identified this issue as a show stopper just for going live, as the way the menu behaves give a real bad user experience. I am surprised about it, as it such a basic UI feature. If would be a little less worse if the menu indicated the active selection, but also this is not available.

    Please solve this as soon as possible, as this way I am not able to apply the Enfold theme for serious service :-(

    #870368

    Hi,

    @tzanten: Which fix? Please make sure that you’re not looking on a cached version of the page after adding the code. Create a new thread and post the url to the site. We would like to check the menu items. Do you have anchor links?

    Best regards,
    Ismael

    #871547

    Hi Ismael,

    thanks for the code and instructions. Unfortunately it does not work.
    Enfold was updated to 4.2. Functions in avia.js was replaced. All caches are deleted.

    I have created a FTP account for you, so please have a look why your code does not work for me.

    Thanks,
    Marcel

    #871622

    Hi Ismael,

    The original issue is like this (reported by Mathuseo):

    “Am I on the subpage “video” and the user opens the mobile main menu and clicks on “video” as well, the menu simply does not react. It would be a little bit smarter when the menu get closed”

    To simulate this:
    – create a menu without sub-menu items, so just having 1st level menu items, for example ‘Home, About, Contant’
    – set to use a mobile menu layout (full layout, covering the whole screen)
    – open the site and navigate for example to “about”
    – next, open the menu and click on ‘about’

    You will see nothing happens, the menu remains covering the screen and no feedback is provided to the user. It seems the site if ‘frozen’, which give a bad experience of course.

    The effect could be limited by indicating the active page, so the user would not try to select the page he/she is on, as it is clear that is useless, in that case I believe the user would simply close the menu with the X. But probably best is to simply reload the page when a user selects the menu items of the actual active page.

    With CSS tweaks I enabled the active menu indication, so for now I can work with this, but the other solution would be preferred.

    Next; about the solutions provided in this ticket: I believe this is focussed on sub-menu items, not on the top level menus. The part of the code update that is suggested is never activated by the code-flow for the case I explained above (with just 1st level. menu’s), I tested it.

    Hope this helps to find a solution

    Kind regards,
    Tom

    #871977

    Hi,

    @mathuseo: We applied the script in the parent theme file and modified it.

    		// close mobile menu if url is the same
    		$('.html_av-submenu-display-click').on( 'click', 'a', function (e) 
    		{ 
    			e.preventDefault();
    			e.stopImmediatePropagation();
    
    			var loc, cur;
    			loc = window.location.href.match(/(^[^#]*)/)[0];
    			cur = $(this).attr('href').match(/(^[^#]*)/)[0];
    
    			if( cur == loc ) {
    				burger.parents('a').eq(0).trigger('click');
    			} else {
    				window.location.href = $(this).attr('href');
    			}
    
    			return false;
    		});

    Best regards,
    Ismael

    #872036

    Thank you very much Ismael. It works great now.
    Is the solution (code in parent theme) safe for updates?

    #873482

    Hi,

    It’s going to be overridden on update. Unfortunately, you can’t do this modification in the child theme. We’ll forward it to Kriesi.

    Best regards,
    Ismael

    #906374

    hi Ismael – what is to substitute? :

    tell me please what lines to substitute – i need that solution too.

    Or maybe an upload of avia.js to pastebin or sth else

    btw. til avia.js does not change on update you can place an edited copy of the whole avia.js into your child-theme/js folder and :

    add_action( 'wp_enqueue_scripts', 'wp_change_aviajs', 100 );
    function wp_change_aviajs() {
       wp_deregister_script( 'avia-default' );
       wp_enqueue_script( 'avia-default-child', get_stylesheet_directory_uri().'/js/avia.js', array('jquery'), 2, true );
    }
    • This reply was modified 2 years, 5 months ago by  Guenni007.
    #906654

    Hi,

    You need to insert the following code…

    // https://kriesi.at/support/topic/close-mobile-menu-by-clicking-on-active-navigation-item/#post-871977

    … around line 194 or after this block of code.

    		//toogle hide/show for submenu items
    		$('.html_av-submenu-display-click').on( 'click', '.av-width-submenu > a', function (e) 
    		{ 
    			var menu = $(this);
    			toggle_submenu( menu, e );
    		});
    

    Best regards,
    Ismael

    #906743

    it’s line 1958 on avia.js

    This original code:

    //toogle hide/show for submenu items
    $('.html_av-submenu-display-click').on( 'click', '.av-width-submenu > a', function (e) 
    { 
    	var menu = $(this);
    	toggle_submenu( menu, e );
    });
    
    function toggle_submenu( menu, e )
    {
    	e.preventDefault();
    	e.stopImmediatePropagation();
    	
    	var parent  = menu.parents('li').eq(0);
    			
    	parent.toggleClass('av-show-submenu');
    	
    	if(parent.is('.av-show-submenu'))
    	{
    		parent.children("ul.sub-menu").slideDown('fast');	
    	}
    	else
    	{
    		parent.children("ul.sub-menu").slideUp('fast');	
    	}
    };

    becomes this instead:

    // close mobile menu if url is the same
    $('.html_av-submenu-display-click').on( 'click', 'a', function (e) 
    { 
    	e.preventDefault();
    	e.stopImmediatePropagation();
    
    	var loc, cur;
    	loc = window.location.href.match(/(^[^#]*)/)[0];
    	cur = $(this).attr('href').match(/(^[^#]*)/)[0];
    
    	if( cur == loc ) {
    		burger.parents('a').eq(0).trigger('click');
    	} else {
    		window.location.href = $(this).attr('href');
    	}
    
    	return false;
    });

    i will try – thanks

    #906754

    ok – this does not solve my problem.
    i think it is the right function but it does not concern to my request.

    i have on my landing page different links in the menu – which are not IDs of a color-section but of a tab.
    See private content.
    on mobile case the links to color-section IDs work even on the same page – the hamburger closed after click.
    But if the link goes to a tab id it stays open

    #907649

    Hi,

    How did you change the fake id of the toggles?

    Best regards,
    Ismael

    #909782

    yes i inserted that code here to have prettier urls on tabs:

    add_theme_support('avia_template_builder_custom_tab_toogle_id');

    #910825

    Hi,

    I think it’s not working correctly because of the current structure of the anchor links.

    /ikom/#werte
    

    Did you try the modification on the actual site?

    Best regards,
    Ismael

    #910995

    but on that: /ikom/#team-leitung it works (close hamburger on click ) only if the aim is a fake-id /ikom/#werte it doesn’t ?

    or do you believe if it is not in a subfolder the wordpress install it will work?
    Edit i tested the last on https://webers-testseite.de/#werte

    • This reply was modified 2 years, 4 months ago by  Guenni007.
    #911478

    Hi,

    I’m sorry but this thread is getting a bit too long. If you don’t mind, please create a new ticket or post and explain the issue further.

    Best regards,
    Ismael

    #911824

    ok for me here it can be closed

    #911941

    Hi,

    Thank you!

    Best regards,
    Basilis

Viewing 29 posts - 1 through 29 (of 29 total)

The topic ‘Close mobile menu by clicking on active navigation item’ is closed to new replies.