Custom off-canvas menu conflict with Astra Theme in mobile view

Hello,

I’m working on a WordPress site using the Astra theme and have run into an issue while integrating a custom off-canvas menu. Here’s what’s happening:

• I created a custom off-canvas menu to replace Astra’s default one.
• The custom menu works perfectly in desktop view but doesn’t open in mobile view.
• Initially, Astra’s own off-canvas menu opened in the Astra Header Builder editor view, but after renaming classes and IDs in my custom code, it no longer does.

Here’s what I’ve done so far:

• I used a child theme and added my custom menu via the Astra Header Builder.
• My custom menu toggle button and menu are implemented using custom HTML, CSS, and JavaScript.
• I suspect there might still be a conflict with Astra’s mobile header or JavaScript.

So,

• Has anyone successfully replaced Astra’s off-canvas menu with a custom one?
• Are there specific steps to fully disable Astra’s off-canvas menu to prevent conflicts?
• Is there something unique about Astra’s mobile view or JavaScript that could cause this issue?

Thanks in advance!

Kind regards,

OT