Search & Menu does not appear with AMP

Thanks for reaching out. From inspecting your site it looks like you’re using the Divi theme, which isn’t fully AMP compatible, with no fallback for the JavaScript based navigation menu and search box in AMP. For performance reasons custom JavaScript has some restrictions with the AMP framework – not specific to the plugin.

While we do have some documentation on the plugin website on how to programmatically make standard navigation menus work in AMP have you tried the AMP plugins reader mode? With reader mode you can choose an alternate theme for your AMP URLs, with your non AMP URLS not impacted. You’ll find a video on how it works below.

Let me know if you have any further questions on this.

I see. Is there a plugin you’d recommend to install to run the script to make standard navigation menus work in AMP?

I have attempted reader mode, but I would prefer the first choice, unless it’s really not possible to make it work.

Unfortunately there is no such plugin, most menu’s work differently so there’s no plugin that provides such capability.

When time allows I’ll see if I can prove you with a solution over the next couple of days for your navigation menu. Just to confirm, you’re not using a child theme at present and you’ve made no custom modifications?

You are correct. I am not using Divi child theme nor have I made any custom modifications.

Many thanks for your prompt responses and help!

Not a problem! Leave it with me and I’ll report back to you here. While I expect this will be at some stage tomorrow it may be early next week.

Thanks for your patience. It turns out that my colleague had answered a similar question previously based on a Divi user. He also created a compatibility plugin that you can use to add AMP compatibility for Mobile menus.

You need to download and install the zip file of the following plugins.

1. https://github.com/milindmore22/amp-divi-mobile-menu
2. https://github.com/milindmore22/amp-generic-compat

You can manually these zip files as a standard plugin upload. After doing so please activate both plugins before following the steps below:

1. Navigate to “AMP -> AMP Compatibility”
2. Click on the Enable checkbox
3. Enter the below details into the input boxes in one row. (End result)
4. Element ul
5. Element Class et_mobile_menu
6. Element Toggle Class opened
7. Action Element div
8. Action Element mobile_nav
9. Action Element Toggle Class show
10. Once all inputs are in place click on the “Save” button before checking your navigation menu in AMP once more

Please let me know if you need any assistance on the above.

Hi again,

I’ve installed and activated the two zip files, and activated the settings as stated above, but it’s still not working out for me. Would you happen to know why?

Also, I’m not sure why, but why AMP landing page has broken after I’ve installed the two plugins and inputted the settings as mentioned above, and updated the AMP plugin to the latest version.

Hi @danielting1,

Thanks for the update. In that case there seem to be further complication with your non compatible theme. I would suggest reverting to one of the reader mode themes.

Sorry we can’t be of more assistance.

I’ve managed to make the menu to work by switching:

Element Toggle Class opened -> Element Toggle Class show

Do you happen to know for the search? The thread link steps you provided does not seem to work.

You’ll need to apply an AMP.setState() call on your search button, which is a span as opposed to a button.

From there you’ll need to bind the et_pb_menu_visible & et_pb_search_visible classes.

I’ve created a video demonstrating the toggled classes. If time allows I’ll see if I can create a similar setup to your own and provide the inputs.

Thanks for the resource. I appreciate the help you’ve provided!