Megamenu Submenu / Tab Not Retracting When Not In Focus

[whitemedia]

Hi,

I have a megamenu whose submenu will not retract when it is no longer in focus (hovered over). Please see the screenshots.

The top-level menu item is called SHOP. The shop has a Tab section as its first child and then normal submenus below that. In the header bar, I have the top level and first child always showing. It is when I hover over the first child that the submenus are displayed. However, when I move the mouse off the menu it is impossible to retract the menu.

I have tried turning on the submenu close button, but at best this will close the submenu, but will not affect the background (see second screenshot).

Is there a way of enabling the panel to be retracted?

Thanks,
Christopher

[nabeel]

Hi @whitemedia,

Thanks for reaching out. Upon checking I see there are couple of JS errors in browser’s console which could be breaking the functionality. I’d suggest you to please check for the following first:

1. Ensure everything is up to date according to our version compatibility list at https://theme.co/docs/version-compatibility. Please follow the best practices when updating your theme and plugins. See https://theme.co/docs/product-updates for more details.

2. If you’re using a caching plugin, clear all caches including browser cache then deactivate your caching plugin and other optimization plugins. If you’re using a CDN, please clear the CDN’s cache and disable optimization services.

3. Test for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

4. Remove custom CSS, JavaScript and deactivate your child theme and switch to parent theme (take a complete backup first).

Let us know how this goes!

[whitemedia]

Hi,

There were no conflicts and after several hours of trial and error, I have eventually found a CSS solution to the problem.

.dt-static .ubermenu .ubermenu-nav .ubermenu-item:first-child > .ubermenu-submenu-drop {
  display: block;
  visibility: visible;
  opacity: 1;
  min-height: 53px !important;
  max-height: 53px;
  overflow-y: hidden !important;
}

.dt-static .ubermenu .ubermenu-nav .ubermenu-item:first-child:hover > .ubermenu-submenu-drop {
  max-height: none !important;
}

Thanks,
Christopher

[ruenel]

Hey Christopher,

It is good to know that you have resolved the issue already. Thanks for sharing the code.

Best Regards.