I'm pulling my hair out

Ask the community
,
1

I have created a “Navigation Menu” (like a mega menu) with text/icons/other elements inside a Box. The box is set to be collapsed on load.
It is set to “Show on all pages”.
It is triggered by a “hamburger” menu icon which has been placed in the header
I have also added an “X” icon in the header which is hidden on load
When the Menu Icon is clicked, the container opens and shows all the elements contained in it
The Menu icon is set to “Hide” when it is clicked and the “X” icon is set to show
When the “X” icon is clicked, it closes the container and is set to hide and the Menu icon is set to show (so the Box can be opened again as necessary)
So far so good, it works perfectly on both desktop and mobile

Here is where the problem arises:

When I click on a “text” element inside the open Box to navigate to a different page, it navigates me to the appropriate page.
However, the Box remains open on top of the new page.
I would like to figure out how to cause the Box to close when I click on a link inside of it

I am attaching a template site where I have been trying to make this work for a client and for the life of me, I can not figure out how to do this.

I would be grateful to anyone who has some ideas on how to make the Box “collapse” after a link is clicked inside of it.

https://shanestanleydivix.wixsite.com/spa-template

2

In the SITE code panel put the following lines:

$w.onReady(() => {
    $w('#myMenu').collapse();
    $w('#menuCloseX').hide();
    $w('#menuIcon').show();
})

//use your element property IDs instead of these in my example
3

WOWOWOWOWOWOWOWOWOWOWO!!!

You ARE a Corvid Master J.D.
I feel like an idiot. The code definitely worked on both desktop and mobile (at least in preview mode).

I will publish the site again and check to make sure it works on the live site because sometimes there is an issue.

I wish I had a background in coding instead of having to just copy and paste so that I could actually understand.

Thanks a million. If I have another question, I’ll post it here and I hope you see it.

Thanks again and again!!!

4

You’re welcome :slight_smile:
No reason to feel like an idiot. We all experienced this issue in the past and learnt how to resolve it by trial and error.

The code itself is pretty easy to understand.

5

Yeah, that totally worked! I can’t believe I spent 5 hours and it was 4 lines of code. Just goes to show me, I should have stayed in school and learned this.

Thanks J.D.