BAD UX on mobile menu on first click

  • Hi I started to use your plugin today and I found it very good. As a UX designer I am not happy with how the first click works. ON mobile, the arrow ICON should expand the sub menu BUT if the user clicks on the text, it should take him to that link. Right now for the menu text to act as a link, the user has to click twice and this is not a good UX because the same thing has two different actions.

    So to make it simple, if users click on text. it behaves as a link. if the user clicks on the down arrow icon, the menu expands. Any way how I can fix this myself please?

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author megamenu

    (@megamenu)

    Hi renezamm,

    Please install the TC Custom JavaScript plugin, then go to Appearance > Custom JS and add the following:

    jQuery(document).ready(function($){
	$('.max-mega-menu a.mega-menu-link').unbind();
});

    Regards,
    Tom

    Thread Starter renezamm

    (@renezamm)

    Thanks a lot for your reply. What this fixes please? Does the first click on the menu text takes you to a page and if you click on the arrow down it opens the menu? thanks a lot

    Thread Starter renezamm

    (@renezamm)

    I tried it a i noticed that the code is not being executed. I am then pasting the code you provided in the browser console and then it works…… are you sure that your code works automatically please?

    Plugin Author megamenu

    (@megamenu)

    Hi renezamm,

    It will unbind the click event from the link itself (the event that opens the sub menu), but leave the events on the arrow indicator.

    If you are not using the TC Custom JavaScript plugin, then you must make sure your JavaScript is enqueued after the maxmegamenu.js file.

    It will also only work when you load the page on mobile, if load the page in your browser, then resize it down to mobile size, you’ll need to refresh the page for it to take effect.

    Regards,
    Tom

    Thread Starter renezamm

    (@renezamm)

    This does not work.. I installed the plugin and I pasted

    jQuery(document).ready(function($){
    $(‘.max-mega-menu a.mega-menu-link’).unbind();
    });

    This is the website I am using it on https://handycasinos24.com/

    It seems that it is not being executed… Only when I paste the code in the inspect element console, works….

    • This reply was modified 4 years, 6 months ago by renezamm.
    Plugin Author megamenu

    (@megamenu)

    Hi renezamm,

    The JavaScript must be positioned after the maxmegamenu.js file, but all of your site JavaScript is being minified by autoptimize and placed at the very bottom of the page, so you’ll need to figure out a way to get it loading after the minified JS file. It may be possible to simply exclude the maxmegameni.js file from being minified.

    Regards,
    Tom

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘BAD UX on mobile menu on first click’ is closed to new replies.