Mobile Mega Menu issues

Hi there,

I am working on a mega menu for mobile using a number of dropdown buttons and I am experiencing some issues. I am using the existing dropdown button available on webflow components.

When I click on the hamburger the menu opens with the structure below:
HOME
Products +

Cladding +

  • Link
  • Link
  • Link
  • Link

Decking +

  • Link
  • Link
  • Link
  • Link

Interior products +

  • Link
  • Link
  • Link
  • Link

Wood Fuels +

  • Link
  • Link
  • Link
  • Link

INSPIRATION
RESOURCES
BROCHURES
CONTACT

The items that have + are the items I use the dropdown to hold submenus. The first issue is with the lottie animation in the dropdown icons. For e.g. When I click on the button cladding, the icon animation of the Plus Icon starts and becomes an Minus Icon. If I click again (2nd click) in the cladding button the Minus Icon becomes a Plus Icon again. So good so far. However when I click on the button Deking the submenu opens and the icon on the cladding button remains a minus icon.

The second issue is when I click on Product button it opens the submenus, then when I click in the submenu item for e.g Cladding it opens another level of submenus, however when in cladding again i closes the Products submenus rather than only the submenus of the Cladding.

This is my first project using webflow, so I believe I am doing something wrong.

You can check the project here:
https://preview.webflow.com/preview/niagara-site?utm_medium=preview_link&utm_source=designer&utm_content=niagara-site&preview=2ffd2c0da4a36aa1b8692c5e1a63569b&mode=preview

Thanks


Here is my public share link: LINK
(how to access public share link)