Creating modal that appear when mobile menu opens

We are still struggling to create a modal that shows up when the mobile menu opens (so the page behind the menu got a dark overlay). We are close to admitting full defeat…

Here’s an example of what we are hoping to achieve:

So we are back here (again) to ask for help. We are using Webflow’s nav component, but had slightly customized the hamburger icon.

Getting the modal to show up covering the top horizontal section of the page (where the regular desktop navbar would be) WITHOUT covering the opened mobile menu just wasn’t possible with our limited knowledge.

We also do not want the modal to slide in from the right with the mobile menu…

Are we suppose to create the opened mobile menu from scratch if we want to have the modal? If it is possible to create a modal without creating the mobile menu from scratch, can anyone provide some step by step please?

Sorry to trouble you guys. :pray:


Here is our read-only link