Mobile menu icon state out of sync with section links

[svn]

The Problem:
I use section links in the navbar for About and Contact to cut down on the amount of pages/user navigation required of the site. Normal page links work fine. But the menu icon state becomes out of sync when a section link is clicked. i.e. icon is an ‘x’ when menu is closed, is a hamburger with menu is open.

Clicking a section link (About or Contact) a second time will bring it back in sync, so to speak. Everything else works, so reloading the page or navigating to another page via conventional link resets everything back to the correct behavior.

The Goal:
The menu icon should always match the open/closed state of the navbar mobile menu regardless of link type clicked by a user: hamburger = menu is closed. ‘x’ = menu is open

Not sure how to implement the behavior I want with section links through webflow’s interface and there’s too much going on in the code to trust my ability to write something myself. Any ideas or insights are very much appreciated!

Thanks,
svn

---

Here is my site Read-Only:

Webflow - Hyper Gaiden

[AJ_Dev (from Memberstack)]

Hey @svn,

Since you are using a navbar component, you could get rid of the interactions placed on the menu icon and instead utilize the “Navbar opens” interaction directly on the navbar11_component you have on the page.

You can set the hamburger icon open and close animation for the menu open and menu close settings in the Navbar opens interaction. Have attached a screenshot of where you can apply this on the page.

This should solve your use-case and the icon should respect the menu open / close state to accordingly change the icon visibility. Hope this helps.