Megamenu in Pro

[mcaravaglia]

Is there a way to have the megamenu show on Desktop, but to show regular menu structure on mobile? I seem unable to do this with CSS.

[nabeel]

Hi @mcaravaglia,

Thank you for reaching out to us. You don’t need to use pro headers, you can achieve that using X native menu. To enable the original header simply go to Pro > Theme Options > Headers and switch back to original header (see screenshot)

Then you can follow the link below to setup the megamenu.

Set up Megamenus | Themeco Docs

This will show the mega menu in desktop screens and regular menu in mobile devices. If you need to use mega menu in Pro headers then you can follow the work around here: https://theme.co/apex/forum/t/pro-megamenu/5467/17

You need to have two bars for this method, one for desktop and one for mobile devices. Ubermenu should be in the bar that is visible in desktop screens and hide it in small screens and for mobile bar you can add a Navigation Collapsed element to have a regular menu.

To hide the bar in certain break points, inspect the bar in header builder, go to Customize tab and select breakpoints to hide the bar (see screenshot)

Hope this helps.

[mcaravaglia]

This worked perfectly. Thank you.

[ruenel]

You’re welcome!
We’re glad @Nabeel were able to help you out.