Mega Menu in Mobile View Lost Hover Emulation After Recent T4 Update

aroundi

Hello,

After upgrading T4 from ver 2.3.1 to ver 2.3.2 my Mega Menu behaviour has changed. In mobile view, after the user touches the hamburger icon the main menu items drop down which is normal. When the user touches a main menu item with a submenu and a link, the submenu no longer drops down for submenu selection; the link is triggered immediately. In desktop view, the main menu is displayed in-line in the header (no hamburger) and the submenu displays on hover which works nicely.

I've been through the configuration options and can not find a way to correct this. Is there something that can be done?

I just upgraded T4 to ver 2.3.3 and the problem is still happening.

J4 4.3.2
T4 2.3.3
T4BS5 1.2.0

Thanks for your help.

saguaros

aroundi Hi

Could you share the super admin account of your site so I can take a look?

aroundi

Hi saguaros

Thanks for your reply. I will post the credentials to my development / test site immediately following this post.

Please note that for any changes that are required, I will need to reproduce them on my production / live site. So, could you let me know what changes are required?

Also, I'll point out that the problem is reproducible on the T4 demo site at: https://t4-framework.demo.joomlart.com/

In mobile view, touching the Typography main menu item sends the user immediately to the Typography page; the mobile user can not access the dropdown links "About us" and "Pricing table".

Thanks for your help.

aroundi

This message is visible to Moderators only

hidden content

saguaros

Hi Mark,

I got your point, but with a menu item which is linkable, when you click, it should redirect to that page. To open the dropdown, you should click the caret / the icon next to the menu item text.

For a better view, I think you can try with Off-canvas menu.

aroundi

Hi saguaros ,

Using Inspect in Chrome set to mobile view I am able to point the touch curser to the caret next to the menu item and get the submenu dropdown. However, from a smartphone using my finger, no matter how much I try, I can only select the link when trying to select the caret. (My) fingers just aren't pointy enough. This behaviour is the same on my development site, my live site, and the T4 demo site.

I can say with certainty that before the T4 2.3.2 upgrade, I was able to get the submenu dropdown. Is it possible to re-enable this functionality in the current T4 version?

Avoiding using an off-canvas menu is a crucial feature of T4 for me.

Thanks

saguaros

There are updates in various files in new version of T4 system plugin and it includes the bug fixes for other issues too so we recommend to use the caret to show the dropdown.

If you want to try, you can download the old version of T4 plugin here: https://www.joomlart.com/member/downloads/joomlart/t4/t4-framework

Unzip and copy the JS file: /t4-system-plugin_2.3.1/themes/base/js/megamenu.js

and replace the file of current version you're using:

/plugins/system/t4/themes/base/js/megamenu.js

(I can't guarantee it will work properly as I mentioned, each version has changes in different files).

aroundi

Hi saguaros ,

Are you able to get the caret to work with your finger from a smartphone? I have not been able to get the dropdown, only the link. It seems to me that the T4 demo site is broken. Are there plans to fix it?

I thought of testing the JA Extension Manager roll-back feature, but that would only be temporary as I would like to keep the framework up to date for future compatibility, security, etc.

Thanks,

mark

saguaros

aroundi It seems to me that the T4 demo site is broken. Are there plans to fix it?

The demo site: https://t4-framework.demo.joomlart.com/ is still working fine at my end. Could you check again?

aroundi

Hi saguaros ,

Using my Android smartphone, I navigate to the T4/T4Blank demo site. In this view, I get 2 hamburger menu icons on the header. I select the left hamburger with my finger and the main menu is displayed in a dropdown. Again using my finger I carefully attempt to select the Typography caret for the submenu selections. The submenu dropdown does not display - instead, the Typography page link is triggered.

Can you verify that you experience the same behaviour using a smartphone navigating with your finger as a normal user would?

As I mentioned, I am able to select the caret when I use a desktop PC running Chrome in Inspect mode set to mobile view which emulates a finger touch with a specialized curser. However, this is not normal use.

In addition, previous to upgrading to T4 ver. 2.3.2 selecting Typography with your finger in mobile view displayed the submenu dropdown.

For these reasons, I humbly propose that the demo site functionality in the above scenario is broken.

If I'm doing something wrong in mt testing please let me know.

Thanks,

mark

saguaros

Hi Mark,

Our team updated custom CSS code into your site so you can easily select the caret:

/* JOOMLART: Fixed: Toggle menu on mobile */
.t4-megamenu .navbar-nav > li > a,
.t4-megamenu .navbar-nav > li > .nav-link {
  display: flex;
  justify-content: space-between;
}

@media (min-width: 768px) {
  .t4-megamenu .navbar-nav > li > a,
  .t4-megamenu .navbar-nav > li > .nav-link {
    justify-content: flex-start;
    align-items: center;
  }
}

.t4-megamenu .nav > .dropdown > .nav-link .item-caret,
.t4-megamenu .nav > .dropdown > .dropdown-toggle .item-caret {
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  width: 20px;
}

.t4-megamenu .dropdown-toggle .item-caret::before {
  border-top: 4px solid #212529;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  content: "";
  display: block;
  height: 0;
  width: 0;
}

I tested with my mobile phone and it worked fine.

Pls help to check again.

aroundi

Hi saguaros ,

I tested and the caret is now selectable. Is it possible to center the caret vertically in the desktop view?

Thanks,

mark

saguaros

aroundi We updated above code a little bit, it should be aligned properly now.

Kindly check.

aroundi

Hi saguaros ,

Yes, the caret now displays nicely in both desktop and mobile views on my test site.

I did some testing with users by asking them to navigate through the site with their phones while I observed. Most users touch the Breastpump label rather than the caret. So I hope the original behaviour previous to the T4 2.3.2 upgrade can be restored.

On my live site, I have disabled the main menu Breastpump link and the dropdown works. This is important as most users are looking for the dropdown selection. I had to create a hidden menu so the page is still accessible from other links. This work-around is better than relying on the caret I think but I'm hoping I can put the link back in the menu at some point. Will that be possible do you think?

Thanks,

mark

saguaros

Hi Mark,

I will share with our T4 team on this but for now, using the caret is the only way to open the dropdown for menu items which are linkable.

nestocom

I've had the same problem since June as I reported here:
https://www.joomlart.com/forums/d/46179-problem-with-mobile-menu/6

I rolled back the t4 system plugin to version 2.2.2. Everything still works with this version. Hitting the little caret on a Smartphone is not a solution for my visitors.

Greetings
Nesto

saguaros

Hi Nesto

I will check with team again on this, for the latest version, pls use the caret for now or using the off-canvas menu.

bvneck

I am having exactly the same problem with my megamenu on mobile. I tried to apply the instructions above an it works to touch the caret to open the dropdown. BUT: I think it should be possible to close the dropdown section by clicking on the caret again, I think.

saguaros

bvneck Thanks for your input. I will forward to our T4 team as well.

ayeaye

Same issue here, the caret is not clickable (unless zoomed in) on touch screen. Ideally, it would be great to have it so that the first tap opens the drop down and second tap go to link in the cases where parent item is a link. Users won't think to tap caret in its current form, as it doesn't look like a button, it just looks like a symbol to Indicate that the menu is a dropdown.

Thanks! 🙂

saguaros

ayeaye I've reported this to our T4 team, I will update here when having news on this. Thanks for your input!