Burger Nav Menu Issues (On Mobile)

Hey all. I’m still relatively new to Webflow and I’m having some issues with a burger nav menu animation that I added onto a website that I built.

THE ISSUE:

The burger menu initially works just fine, but when you click on a link inside of it, the new page loads, but the burger menu remains. Not only does it remain on the page, but the nav links are now strangely out of position rather than being nicely stacked on top of one another like they were before. This can be easily fixed by tapping on the burger menu and closing it and then tapping on it again and reopening it, but I’d prefer for the visitors and users to not have to go through those two extra steps to bring it back to normal.

So in summary, I’m trying to achieve the following:

  1. How to make it so the menu disappears as the new page is loaded after clicking on one of the links

AND

  1. How to prevent the burger menu link stacking on mobile to not get out of whack (i.e. out of position) after clicking on the page.

Any help would be greatly appreciated! I’ll add my page here for you to test it out on your own mobile devices.

Thanks!

Ryan


Here is my site Read-Only:
https://preview.webflow.com/preview/rg-johnson-company-inc?utm_medium=preview_link&utm_source=designer&utm_content=rg-johnson-company-inc&preview=6c34483e1dedb54f66248ccbd251fea9&pageId=60e615ba9227362b01219c62&workflow=preview