One-page Navigation Menu Closing and Opening

[jessebrito]

Hello,

I have a one-page website which toggles between different sections to act as pages. Previously, there was an issue with getting the nav-bar menu to close after a link is clicked. This is a frequent topic with many past solutions on the forum, but following the latest update X theme has changed how the menu’s behavior is handled. Is there an up-to-date solution?

Below is the old solution which worked up to the 6.0 update (I’m unsure exactly when X theme changed the menu behavior, but this no longer works in 6.0.4.)

jQuery(document).ready(function($){ $('.menu-item a').click(function(){ $('.x-nav-wrap.mobile').removeClass('in'); }); });

Below is my current solution. It succeeds in closing the menu after a link is clicked, but re-opening the menu now requires two clicks instead of one.

jQuery(document).ready(function($){ $('.menu-item a').click(function(){ $('.x-btn-navbar').addClass("collapsed"); $('.x-nav-wrap.mobile').addClass('x-collapsed'); $('.x-btn-navbar').attr("aria-selected", 'false'); $('.x-btn-navbar').attr("aria-expanded", 'false'); $('.x-nav-wrap.mobile').attr("aria-hidden", 'true'); }); });

You can take a look at what I’m talking about here.
What’s the reason for the change to the menu behavior? I noticed it has been changed multiple times, requiring updated solutions for this issue.

Looking forward to your response, thanks!

[rad]

Hi there,

Thanks for posting in.

Based on the code provided, it will really going to be glitchy regardless of theme version. Because it only changed the class of the element, but not the status data of the toggle (through javascript data). The solution is toggling the mobile menu through trigger() instead of just removing the in class and adding collapsed, x-collapsed.

Would you mind removing those code and provide the details of what you originally intend to implement?

Thanks!