![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
-
AuthorPosts
-
October 15, 2017 at 7:45 am #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,
MarcelOctober 16, 2017 at 5:58 am #864643Maybe someone will figure out a way to optimize that?
October 16, 2017 at 2:54 pm #864834Hi 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,
VictoriaOctober 16, 2017 at 4:11 pm #864868Hi 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,
MarcelOctober 17, 2017 at 8:26 pm #865442Maybe someone with an idea? I did not think that it is that difficult.
October 19, 2017 at 4:07 am #866039Hi,
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,
IsmaelOctober 19, 2017 at 5:35 am #866073Hi Ismael,
thanks for your help. Unfortunately the code does not work for me (all caches are deleted). Any idea why?
Best Regards,
MarcelOctober 20, 2017 at 10:24 am #866658Hi @Ismael, any idea why it does not work for me?
Thanks,
MarcelOctober 21, 2017 at 4:42 am #866925Hi,
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,
IsmaelOctober 26, 2017 at 9:26 am #869144Hi 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,
MarcelOctober 28, 2017 at 4:58 pm #869966Hi,
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,
IsmaelOctober 29, 2017 at 1:09 am #870048I 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 :-(
October 30, 2017 at 7:11 am #870368Hi,
@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,
IsmaelNovember 2, 2017 at 6:16 am #871547Hi 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,
MarcelNovember 2, 2017 at 12:38 pm #871622Hi 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,
TomNovember 3, 2017 at 5:20 am #871977Hi,
@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,
IsmaelNovember 3, 2017 at 9:25 am #872036Thank you very much Ismael. It works great now.
Is the solution (code in parent theme) safe for updates?November 7, 2017 at 3:17 am #873482Hi,
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,
IsmaelFebruary 1, 2018 at 4:38 pm #906374hi 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 6 years, 7 months ago by
Guenni007.
February 2, 2018 at 6:44 am #906654Hi,
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,
IsmaelFebruary 2, 2018 at 10:12 am #906743it’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
February 2, 2018 at 10:31 am #906754ok – 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 openFebruary 5, 2018 at 3:53 am #907649February 8, 2018 at 2:35 pm #909782yes i inserted that code here to have prettier urls on tabs:
add_theme_support('avia_template_builder_custom_tab_toogle_id');
February 11, 2018 at 11:49 pm #910825Hi,
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,
IsmaelFebruary 12, 2018 at 10:48 am #910995but 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 6 years, 6 months ago by
Guenni007.
February 13, 2018 at 4:23 am #911478Hi,
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,
IsmaelFebruary 13, 2018 at 6:14 pm #911824ok for me here it can be closed
February 13, 2018 at 10:36 pm #911941Hi,
Thank you!
Best regards,
Basilis -
This reply was modified 6 years, 7 months ago by
-
AuthorPosts
- The topic ‘Close mobile menu by clicking on active navigation item’ is closed to new replies.