Custom Nav Interactions

Hi,

Please bare with me as I am far from an expert in Webflow. I created a custom navigation menu and I am having difficulty achieving the functionality that I want. I have two main issues that I will attempt to describe below:

  1. When you click on “MENU” in the top right it opens up what I call the Panel Menu. You’ll see the hamburger turn into an X. Users can click on the X to close the panel menu. I would also like users to be able to click on the body to have the menu close. When they click on the body I would also like the X to turn back into a hamburger.

  2. Similarly to this issue, you’ll see that the dropdown arrows for each menu item rotate when the parent menu item is clicked. It returns to its original position when clicked a second time. However, if you click once, and then click the X to close the menu, the carrot does not return to its original position. Instead, when you open the panel menu again you’ll see that the carrot is pointed downward still, but the sub menu is collapsed.

Wow, hows that for complicated?? Thank you to ANYONE that has read this far.

Can someone please help me with this? I’ll Venmo you for some beer or something.


Here is my public share link:
https://preview.webflow.com/preview/mvr-sample?utm_medium=preview_link&utm_source=designer&utm_content=mvr-sample&preview=233088d786ca5ece2f9c9bed34fefc43&mode=preview