Mobile Dropdown Menu Stuck

[aaronnash]

Hi,

Our mobile dropdown menu is always stuck open; it won’t close. The website is http://reachingforrainbows.com. How do fix this?

Thanks

[jade]

Hey Aaron,

I have checked your site and there is a Javascript error that is from the Custom Contact Forms plugin that is causing the issue.

Try disabling the plugin or fixing the error it is causing on the site:

https://codex.wordpress.org/Using_Javascript

Hope this helps.

[aaronnash]

Hi,

I tried disabling the plugin but the problem remains.

[benursal]

Hi Aaron,

The culprit is the following block of code found on Theme Options > CSS:

.x-nav-wrap.mobile.in,
.x-nav-wrap.mobile {
    display: block !important;
}

Please change it to:

.x-nav-wrap.mobile.in:not(.x-collapsed),
.x-nav-wrap.mobile:not(.x-collapsed) {
    display: block !important;
}

It should do the trick.

That said, I did a background check as to why this block of code was added in the first place. I found out it was given by one of my team member as a solution to your request to show the hamburger menu earlier to avoid the menu items showing in two lines.

Since it’s been two years since it was given, I assume it didn’t cause any problem until now. This sometimes happens when custom CSS coding is used (and I believe custom CSS coding is the best solution for this specific case).

Now, I’m sharing this because the code I’ve shared right now, though working (by the way, tell me if it doesn’t), isn’t 100% guaranteed to continue working 2, 3 years from now. So if you experience a problem related to the mobile menu in the near future, the first part you should test is the custom codes.

And also, you can reach out to us.

Cheers.