Nested Button Menu in Megamenu

[sleswildcats]

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

[ruenel]

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.

[sleswildcats]

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.

[friech]

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,

[sleswildcats]

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.

[friech]

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,