I once used OceanWp and even wrote about how the hamburger (☰) menu, search icon and drop-down sub-menu on mobile, etc. were not working properly in it.
Now on the WordPress forum, every new user is facing this problem.
Whenever they try to click on their navigation menu or header menu in the mobile version of their site, no matter what OS they are on-
It doesn’t work.
It simply shows a /# at the end of the site URL.
One user even asked is there any possible fix that’s working for all or not.
Yes, there is.
If you’re also facing the same issue after switching to WordPress themes like:
Themify, Avada Etc., then below are a few things that might be causing this issue on your site.
And I’ll help you fix that.
Let’s get started.
Cause Of Mobile Menu & Search Icon Error
The mobile menu, submenu items, and search icons, all of the three elements on your website work with the help of javascript and are given styles by CSS.
If the page on your website is unable to load javascript, your mobile menu and search icon won’t load.
This can also happen when your page is showing a static page due to an error in your cache file. In this case, also, the javascript will not load.
Many plugins do optimize CSS delivery, compress javascript files and minify HTML. This also causes some elements including a responsive menu and searches to stop working on your website.
Now you know about the cause of the error, let us find some possible solutions to fix this.
1. Disable Cache & Speed Optimization Plugins
I found speed optimization plugins like Autoptimize, Async javascript, HummingBird, WP Speed of light and Fast velocity minify are common among all those websites which have this error, including mine.
WordPress Cache plugins like WP Super Cache, W3 total cache, Litespeed cache and WP Rocket are too responsible for this. However, WP rocket doesn’t show any error when you do not turn its minify options on.
All you have to do is disable any speed optimization or cache plugin(s) if you have them on your website and mobile menu and the search icon will start working.
2. Uninstall Any Other Themes Installed
I’ve also experienced that the search icon wasn’t working when I installed Genesis framework. At first, Genesis wasn’t even installing at all but after disabling OceanWP, it did.
When I installed Astra and activated it keeping Genesis deactivated but still installed in the backend, The mobile menu and search icon both didn’t work.
I then discovered after uninstalling genesis and another theme I had installed, it went normally.
So, uninstalling any theme rather than the one in which the issue was occurring will help you solve this problem.
3. Check Your Browser Cache & Script Loading Options
It might also happen that you’ve disabled loading javascript on your browser. Check into the setting of chrome, Microsoft Edge or Safari to see if it is enabled to load-scripts.
Clear your browser cache and reload your page to see if it works.
Press CTRL+H to open history in chrome and click on clear browsing data. Open Safari in Mac and select clear history and website data or simply select cache data.
Also, disable any of the extensions you might have one by one to check which particular extension is responsible to cause this error.
Some More Possible Reasons…
You might have recently installed a new plugin that may cause this conflict. It could be any plugin like page builder add-ons, SEO plugins, internal linking automation plugins etc.
Any plugin that affects the front end of your website can cause this problem.
The only way you will be able to know what’s the reason behind it is by disabling all of your plugins one by one until you find the main culprit. Most probably it will be one of those plugins that work on the front end of your blog.
I hope you’ve got the solution to this error. I saw this in OceanWP, but it has been reported for other themes too including Astra, Avada and Generatepress and this solution will correct all of them.
You should also read my post on what to do when wp-admin redirects, refreshes, or gives 404. Share this post to let other WordPress users know how to get rid of this problem.
If still, you face this error, there may be some other internal fault and in such case, you can hire some from Fiverr to look into the issue for you.
Search icon wasn’t working in OCEANWP. It ended up being Async Javascript plugin. Why no one else knows this is beyond you and me. (including OceanWP) Mucho thanks, man!
Great that you found the fix, Federico. I’ve used the theme and gone through the problems in it. That’s the only reason I wrote this solution.
I found that the WP Facets “flyout” menu causes a conflict too, Disabled and worked fine. Any heave JS plugins can do this too.
Thank you so much for this article ! My menu wasn’t working on my avada theme. Like you said, it was a conflict with a page cache. “Autoptimize” plugin.
Thanks again,
Claudia
Glad it worked 🙂
Aren’t plug-ins (like Autoptimize, W3 Total Cache, etc) great for increasing page speed? What do you recommend instead? I hate that my site’s menu doesn’t work on mobile (Astra theme), but I also hate how slow it is. Any advice?
You can use alternatives to the plugin that causes the problem. If Autoptimize is causing it, use WP Rocket, and vice versa. Every single speed optimization plugin won’t cause the error.
Hi, the hamburger menu on my page shows, and it’s clickable, but it disappears as soon as you click on it. Any thoughts on why?
The same solutions apply to that as well. If it’s disappearing while the sub-menu appears, it might be a CSS color issue.
I was stuck and had become tired of troubleshooting this issue. I disabled website optimizer and the menu then loaded like a charm. Thank you so much Aayush.
Welcome, Anas.🙂
Thanks for this solution it was exactly the same PB (I deactivated WP-Optimize – Clean, Compress, Cache plugin…)
Thank you so very much. I have been trying to fix this on colormag theme from themegrill without any luck. I found your post and #1 was the answer. They had SG Optimizer installed and that was the issue. I so, so appreciate your post.
I’m glad it helped
Thank you so much!! I had this exact problem, disabled the ‘WP Fastest Cache’ plugin and it instantly worked. You’re the man.
I appreciate it mate 🙌
I am having the same issue here with my Avada theme WordPress site. At random, the mobile “hamburger” menu icon is not opening my mobile menu. I have checked all elements you listed above & any aspects mentioned from other folks posts but haven’t found the working solution yet. I do have “proxy cache purge” plugin installed. I deactivated it & it still wasn’t allowing the menu to open on mobile. This issue seems to have taken place over the past week. The only change/update that I have made prior was applying an Avada patch #418984 today which “Fixes PHP notice and request loop when custom icons package is missing and preloading icon fonts is enabled.” Do you have any solutions for me?
https://homewoodmetalworks.com/
### Avada Versions ###
Current Version: 7.3.1
Previous Version: 5.5.2 6.2.3
### WordPress Environment ###
Home URL: https://homewoodmetalworks.com
Site URL: https://homewoodmetalworks.com
WP Content Path: /home/wp_9cg7dv/homewoodmetalworks.com/wp-content
WP Path: /home/wp_9cg7dv/homewoodmetalworks.com/
WP Version: 5.7.2
WP Multisite: –
PHP Memory Limit: 256 MB
WP Debug Mode: –
Language: en_US
### Server Environment ###
Server Info: Apache
PHP Version: 7.4.3
PHP Post Max Size: 505 MB
PHP Time Limit: 500
PHP Max Input Vars: 3000
ZipArchive: ✔
MySQL Version: 5.7.29
Max Upload Size: 500 MB
DOMDocument: ✔
WP Remote Get: ✔
WP Remote Post: ✔
GD Library: bundled (2.1.0 compatible)
### Active Plugins (20) ###
Akismet Anti-Spam: by Automattic
AMP: by AMP Project Contributors
API KEY for Google Maps: by GeoDirectory
Disable Gutenberg: by Jeff Starr
DreamHost Panel Login: by DreamHost
danielbachhuber
DreamObjects Backups: by Mika Epstein
Avada Builder: by ThemeFusion
Avada Core: by ThemeFusion
FV Player: by
GA Google Analytics: by Jeff Starr
Global Site Tag Tracking: by naa986
Insert Headers and Footers: by WPBeginner
PDF Embedder: by Lever Technology LLC
UX Image Gallery: by UX
Code Embed: by David Artiss
UpdraftPlus – Backup/Restore: by UpdraftPlus.Com
DavidAnderson
Proxy Cache Purge: by Mika Epstein
Yoast SEO: by Team Yoast
WP Google Maps: by WP Google Maps
WPForms Lite: by WPForms
### Avada Changelog ###
Hi McKenzie,
I’d suggest roll back to the previous theme using a Rollback WordPress plugin. Check if the menu icon has any “a href” tag, such as “#”. That might be the problem.
I am using generate press theme as well as GP premium. After disable mobile caching on wp rocket my navigation menu properly works on mobile. but after enable it, it totally not working. what file I should exclude in wp rocket. to not caching my navigation.??
Had this issue and it was indeed Hummingbird. Thanks for this info.
Generatepress menu dropdown problem with amp can be solve by simply activating the off canvas panel
Thank you very much because I had tried everything, but disabling Autoptimize has been the solution.
Thank you very much, the Async Javascript plugin plugin was the culprit 🙂
If a particular plugin is causing this problem, why isn’t it being updated from within that plugin?
Thanks for this solution. I’m using wp-optimize, I just had to disable minify for javascript in Minify settings and it works.