Nested Button Menu in Megamenu

I love the new modal megamenu option in Pro headers. The template with buttons in the megamenu is fantastic, but I’d like to have each button trigger a secondary collapsible menu. This wouldn’t necessarily be a submenu as each button would trigger a different menu on click. What is the best way to achieve this?
Thank you

Hello Angela,

Thanks for writing in! The nesting of the Dropdown element may be possible. It might also complicate your layout. You can have something like this:


Hope this helps.

Thank you for responding. You’re right, that just overcomplicated it, so I ended up just removing the buttons and creating three separate navigation dropdowns. The problem now is that the menu doesn’t appear when I click. I’ve confirmed that overflow is not hidden and that the links are active. Is there something else I might be missing?
Thank you.

Hi Angela,

I can’t replicate the issue on my end, try clearing all your caching plugins and features (if any), and if the issue persists, please do a Testing for Plugin Conflict.

If it still does not resolve, please provide us login credentials on a “Secure Note” so we can take a closer look.

Thanks,

Thank you for responding. I deactivated all plugins and cleared my cache, but I am still not seeing the secondary menu. The header is HERO and is only attached to the home page.

I’ve just added a secure note w/login credentials.

Thank you.

Hi Angela,

Those dropdown has a lower z-index than the backdrop of the off-canvas, that means those dropdown are behind the off-canvas.

To resolve that, we need to increase the z-index of those dropdowns. To do that, you can add the CSS below on the navigation dropdown’s Element CSS area

$el.x-menu.x-menu-dropdown {
  z-index:99999999;
}

Hope it helps,
Cheers,