If you are a WordPress developer, you may have come across an issue with the navigation block. When the mobile menu is opened on smaller screens and the screen size is then increased to desktop size, the desktop menu may not appear, and the mobile menu may take up the entire screen with no option to close it. This can be a frustrating issue, especially for users accessing your website on mobile devices. However, there is a solution to this problem that involves using JavaScript.

In this article, we will discuss how to fix the issue with the WordPress navigation block using JavaScript.

Step 1: Create an event listener

To fix the issue, we will use JavaScript to create an event listener that will detect when the window is resized. This will allow us to take action based on the screen size.

window.addEventListener('resize', () => {
  // Code goes here
});

This code creates an event listener that will execute the code inside the function whenever the window is resized.

Step 2: Select the responsive container

Now we will use querySelector to find the container that is causing this issue.

let navResponsiveContainer = document.querySelector(".wp-block-navigation__responsive-container");

Step 3: Detect screen size

Now that we have an event listener, we need to detect the screen size. We will use the window.innerWidth property to get the width of the window. If the window width is greater than 600 pixels, we will remove the classes that are responsible for showing the mobile menu and display the desktop menu. If the window width is less than 600 pixels, we will remove any inline styles that were added to the mobile menu.

let navResponsiveContainer = document.querySelector(".wp-block-navigation__responsive-container");

window.addEventListener('resize', () => {
  if (window.innerWidth > 600) {
    // Code for desktop widths goes here
  } else if (window.innerWidth < 600) {
    // Code for mobile widths goes here
  }
});

Step 4: Remove classes from mobile menu on desktop sizes

To remove the classes from the mobile menu, we can use the classList property. We will remove the is-menu-open and has-modal-open classes, which are responsible for showing the mobile menu. We will also need to change the display property since the bug makes it get stuck on none.

let navResponsiveContainer = document.querySelector(".wp-block-navigation__responsive-container");

window.addEventListener('resize', () => {
  if (window.innerWidth > 600) {
    navResponsiveContainer.classList.remove('is-menu-open');
    navResponsiveContainer.classList.remove('has-modal-open');
    navResponsiveContainer.style.display = 'block';
  } else if (window.innerWidth < 600) {
    // Code for mobile widths goes here
  }
});

Step 5: Remove inline styles from mobile menu

To remove any inline styles that were added to the menu, we can use the removeAttribute() method to remove the style attribute.

let navResponsiveContainer = document.querySelector(".wp-block-navigation__responsive-container");

window.addEventListener('resize', () => {
  if (window.innerWidth > 600) {
    navResponsiveContainer.classList.remove('is-menu-open');
    navResponsiveContainer.classList.remove('has-modal-open');
    navResponsiveContainer.style.display = 'block';
  } else if (window.innerWidth < 600) {
    navResponsiveContainer.removeAttribute('style');
  }
});

Step 6: Test your solution

Once you have added the JavaScript code to your WordPress website, test it by opening the mobile menu on a smaller screen and then resizing the window to see if the desktop menu appears. If the solution is successful, the mobile menu should close, and the desktop menu should appear when the window size is increased to desktop size.

Conclusion

The issue with the WordPress navigation block can be frustrating for users accessing your website on mobile devices. However, by using JavaScript, you can create an event listener that detects screen size and takes action based on the size. In this article, we discussed how to fix the issue by removing classes from the mobile menu and removing inline styles that were added to the mobile menu. By implementing this solution, you can improve the usability of your website and provide a better user experience for your visitors