I’ve been asked to create a bit of complex nav-bar menu.
On my project I would like to click on a nav-bar button (for example Fulfilment), and have a popup modal, with the logo on the left, and a sub-menu in the middle appearing.
So far so good, but the problem comes when I try to click on a different nav-bar button (for example ‘Print’) and I want the old modal to close, while also if i click AGAIN on the same button (‘print’) for the modal to close.
Additionally, it would be nice if one of the modals is active, to block the scrolling of the page.
Is there a reason you want to use a modal in this scenario? Modals can be tricky, especially when you have multiple on a page. I suggest using a typical dropdown. You can find a lot of varied navbars on Relume. If you still want to use a modal, I suggest using Finsweet. They also have pre-built modals via their Webflow app.
I’ve managed to use your suggestion, and and is opening/closing nicely, I only have to stop the scrolling now and also when a button (for example ‘Fulfilment’) is clicked, I would like the other 4/5 to be visible too, instead they disappear?