Do This When Mobile Menu, Search Icon Etc. Don’t Work In WordPress

ByAayush Bhaskar Updated on WordPress Guides

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.

Share on:

23 Comments

  1. 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!

    Reply

    1. 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.

      Reply

  2. I found that the WP Facets “flyout” menu causes a conflict too, Disabled and worked fine. Any heave JS plugins can do this too.

    Reply

  3. 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

    Reply

  4. 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?

    Reply

  5. 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?

    Reply

    1. The same solutions apply to that as well. If it’s disappearing while the sub-menu appears, it might be a CSS color issue.

      Reply
  6. Anas Khan says:

    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.

    Reply
  7. Idris elise says:

    Thanks for this solution it was exactly the same PB (I deactivated WP-Optimize – Clean, Compress, Cache plugin…)

    Reply
  8. Becky Willis says:

    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.

    Reply

  9. Thank you so much!! I had this exact problem, disabled the ‘WP Fastest Cache’ plugin and it instantly worked. You’re the man.

    Reply

  10. 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 ###

    Reply

    1. 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.

      Reply
  11. Rupam sarmah says:

    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.??

    Reply
  12. jeff brown says:

    Had this issue and it was indeed Hummingbird. Thanks for this info.

    Reply

  13. Generatepress menu dropdown problem with amp can be solve by simply activating the off canvas panel

    Reply
  14. Fulanita de tal says:

    Thank you very much because I had tried everything, but disabling Autoptimize has been the solution.

    Reply

  15. Thank you very much, the Async Javascript plugin plugin was the culprit 🙂

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *