Megamenu Collapsed Dropdown Submenus Not Working

trevorellis

Hello I am using the Uber template and the Megamenu on small screens does not display submenus. It works fine on a big screen when you hover over the menu heading (as shown in Img01). However it does not display the submenu on small screens when you hover over the menu heading or click it (as shown in Img02). I have tested this in multiple browsers (Edge and Chrome) and on multiple devices (Desktop PC and iPhone). Please help, any assistance would be greatly appreciated.

saguaros

trevorellis
Hi,

It seems due to your custom theme, as I can see that it lacks some style for the dropdown menu, try to use this:

@media (max-width: 480px) {
.t3-mainnav .t3-navbar-collapse .navbar-nav .dropdown > a .caret {
  position: absolute;
  top: 40%;
  right: 12px;
}
}

trevorellis

saguaros Thanks for your response. However, we still cannot get it working consistently. We have tried on a variety of devices (Desktop PCs, laptops, mobile phones etc...). We have tried clearing our cache, using different browsers (Edge, Chrome, Safari) but the megamenu dropdown menu does NOT always work. We are very confused because it sometimes does work properly. Any further assistance you could offer would be greatly appreciated.

saguaros

trevorellis
Hi,

I don't see my above suggestion code on your site now, did you add it?

trevorellis

saguaros Okay you had added the code to the top of the custom.css as the following:

/*Dropdown menu on mobile*/
.t3-mainnav .t3-navbar-collapse .navbar-nav .dropdown > a .caret {
  position: absolute;
  top: 40%;
  right: 12px;
}

I have now added the @media part so that it now reads:

/*Dropdown menu on mobile*/
@media (max-width: 480px) {
.t3-mainnav .t3-navbar-collapse .navbar-nav .dropdown > a .caret {
  position: absolute;
  top: 40%;
  right: 12px;
}
}

We have tried again using different browsers and clearing the cache but it still does not seem to work. Please help.

saguaros

trevorellis
Hi,

I still don't see my suggested code on your site, could you share the ftp account? I will take a closer look and check for you.

Regards

trevorellis

saguaros Hello, I have attached a screenshot of the custom.css file with your code suggestion circled in red.

I have added the ftp login information to the ftp info (host, user, pass) field. I have whitelisted the IP addresses 113.190.254.239 and 118.70.176.221. Are these IP addresses correct or do I have to whitelist any others?

saguaros

trevorellis
Hi,

I checked it further and realized that the caret is not included with an < a > tag. Do you have any customization on T3 plugin? If not, try to install T3 plugin into your site (backup your site first).

trevorellis

saguaros T3 version 2.7.4 is already installed on the site. We have re-installed it yet the problem persists. Please help.

saguaros

trevorellis
Do you mind if I clone your site to debug in my local? your site loads quite slowly.

trevorellis

saguaros We have no objections to that. You can clone our site. Thanks for the speed of your reply.

saguaros

trevorellis
Thanks for your confirmation, let me check and will get back to you.

trevorellis

saguaros Okay that's great.

trevorellis

While you continue to work on the problem, we have created a work around. We have made the menu items Ladies Clothing and Mens Clothing Virtuemart Category Layouts and have then disabled the hyperlinks via custom.css code.

a.customcustommensclothingmenulink {
  pointer-events: none!important;
}

a.customcustomladiesclothingmenulink {
  pointer-events: none!important;
}

The only problem with this is that the dropdowns do NOT work when you hover over the parent menu items, only when you click them. We have done this because we do NOT want to delay our client's website for longer than necessary. We would still like this issue resolved please.

saguaros

trevorellis

Hi,

Is it working now? the last time I checked, there was not <a > tag which contains the caret so you can't click to open the dropdown sub-menu, but I see the <a> tag now.

With this collapsed menu, you need to click to open, not hover.