Hamburger/Mobile menu won't close on certain breakpoint

Hamburger/mobile menu will not close within the 980 and 1200px breakpoints. It closes properly for smaller breakpoints. I’ve cleared browser/server/plugin caches, ensured all plugins/theme/core are updated and have one-by-one disabled plugins with no luck. I saw the below code mentioned in another thread, however this prevents it from opening all together.

.x-collapsed {
display: none !important;
}

Hello @creekview,

Thanks for writing to us.

In order to help you with your concern, we need to check your settings. I would request you, please share your details in a secure note. Please provide the following details meanwhile you must troubleshoot a few common issues before we investigate your settings.

  • WordPress Login URL
  • Admin level username and password

You can find the Secure Note button at the bottom of your posts

Thanks

Thank you Prakash, I have added the secure note with the login credentials.

Hi @creekview,

I have checked your website and found the problem you specify here. The Humberger menu is visible on specific breakpoints which have been overridden using the custom CSS code in the style.css file of your child theme. What you are trying to do, is required a few more customization like adding the collapsed class on that specific breakpoint to the dropdown menu, I would suggest you hire a developer who can assist you to do the customization or you can avail of our newly launched service called Elite service, where we offer complex customization.

Alternatively, you can create a custom Header using Header Builder which is exclusively available with Pro not the X you are using, and add the Humberger menu elements for the specific breakpoints and Navigation Inline elements only for other breakpoints.
I would suggest you upgrade to the Pro theme, please go through the process here: https://theme.co/docs/converting-from-x-to-pro
And also go through the following article on Header Builder.


And then you can add the following Navigation element for the desktop:

  1. Navigation Inline

And then you can add the following Navigation elements for smaller screen:

  1. Navigation Dropdown
  2. Navigation Modal
  3. Navigation Off Canvas

And adjust the Navigation by using the Customize > Hide During Breakpoint option to show/hide in the specific screen size.

Hope it helps.
Thanks

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.