Barba.js + Updating Navbar and Footer current link status

Hey Everyone,

I am currently trying to incorporate barba.js into my project to smooth the user experience/reduce page loads. However I am experiencing odd behaviours with the navigation bar status and the footer status, some which make sense, some which do not.

  1. When navigating away from index (home) the next page is always reloaded (barba.js is non-functional and I do not know why), if navigating to index from another page barba.js loads index properly and will navigate away from index properly as long as a page load (via double clicking index) is not triggered.

  2. When navigating away from any other page barba.js works as intended but the navigation bar and footer link do not update (this make sense as there is no page reload, clicking the same link a second time forces a page load which updates the states correctly) is there a way I can force the navigation links to update after a “page load” via custom code?

I tried putting the navbar/footer into the barba container but that defeats some of the purpose and also breaks the hamburger menu on mobile (sometimes it opens, sometimes it doesn’t)

I have shared a read-only link below to my project if anyone has any ideas I would appreciate the help, I am a structural engineer not a web developer :joy:

Thank you!


PS. just realized you can’t publish read-only projects so the custom code/barba.js wont run. Please see the cloneable site here (stripped a bit of information but functions the same)

PPS. The hamburger menu does weird things in the designer but seems to function properly when published.