Menu breaks on mobile

Hello @mekasiat

Thanks for the support topic, every theme has a different toggle mechanism for the menu and so what worked for someone else may not work for you unless you are using the same theme.

For navigation on mobile please download the following plugin as a zip file and install it.

Plugin: https://github.com/milindmore22/amp-generic-compat

Once the plugin is installed, active it and follow the next steps

1. Goto AMP -> AMP Compatibility
2. click Enable checkbox
3. Add the details in input boxes in one row the final result will be someing like this screenshot
4. Add html below Element
5. Add no-js below Element Class
6. Add offcanvas-open below Element Toggle Class
7. Add a below Action Element
8. Add hamburger-btn below Action Element class
9. Add active below Action Element Toggle Class
10. Once all inputs are in place click save

also, add the following css in Appearance -> Customize-> Addtional CSS

html[amp] .offcanvas-nav li.menu-item-has-children>.indicator {
    display:none;
}

html[amp] .offcanvas-nav ul ul{
  display:block;
}

Check if your mobile navigation works by visiting the AMP page and Let us know if this resolves your issue.

Hello (@milindmore22),
Wow !!! Thank you a lot, it’s very great and it works !! Thank a lot for your help.
I have also this blog : https://bit.ly/2Qa9Gf4 where I had a same issue. I’ve just applied your solution to this blog and the menu also works.
But on this blog : https://bit.ly/2Qa9Gf4 I have an another issue and I hope you can also help me. Indeed, I set also the transitional mode to this blog which has the same theme with my first blog. But on this second one, https://bit.ly/2Qa9Gf4, the homepage appears empty and I do not know why because both blogs work on the same theme. I suppressed some plugins and only keep the needed ones.
Hope you can help,
Thank you a lot,
Best regards,

Hello @mekasiat

There are two issues I find out,

1) Most Viewed section: The Fox theme may be using the slick slider, which is based on custom javascript. custom javascript is not allowed on AMP pages, so the AMP plugin removes them for you to create valid AMP pages. I will recommend contacting the theme author ask him to make the theme AMP compatible.
You can suggest the theme author using the amp-carousel component for the same.

2) Latest Posts: it’s possible Masonaory (custom javascript) is applied on the latest post section, check if you can disable it.

Hi (@milindmore22),
Thank you for your help. I think and am sure you are right that the problem comes from these two issues. I use the same theme on both blogs and but the one in vietnamese works well but not this one.
I suggested to the theme author making his theme AMP compatible, he said he will and I hope so :).
So the only solution I can do from my level is to change the homepage making it differently, right ? ??
Thanks,

Hello @mekasiat

Good to hear that the theme author will consider it, let him know to contact us if he needs any guidance. once the theme is fully AMP compatible he can feature it on our ecosystem listing.

For now, I will suggest disabling AMP on Homepage, or switch to Reader Mode and choose AMP compatible themes for AMP pages (Like Astra or Neve), check this video to understand how you can leverage reader mode.

To disable AMP on the pages having an issue look for the AMP toggle button in the editor.

As we didn’t receive a response I’ll mark this as resolved. Feel free to open a new support topic if you require any further assistance.

Hello @milindmore22
How are you ? I am sorry. I should have informed you that the menu works now, well almost !!! ??
Indeed, the menu works but not the sub-menu categories. You can take a look here : https://bit.ly/3dz3UwJ
Also, after installing AMP Compatibility plugin and fixing the menu issue, the footer disappears. I do not know if this issue relates to the AMP Compatibility plugin but now I do knot see the footer anymore.
How can I fix this issue, please ?
Thank,

Hello @mekasiat

Please use the CSS snippet in Appearance->Customize->Additional CSS to fix submenu issue

html[amp] .offcanvas-nav ul ul{
   display:block;
}

html[amp] .offcanvas-nav li.menu-item-has-children > .indicator{
   display:none;
}

Regarding the disappearing footer, I don’t see the footer on the non-AMP mobile version of your site too, you can check the same by opening this link on Mobile, It will be the best approach to contact the theme author and get it fixed, once the fix is applied it will reflect in the AMP version.

Rehi @milindmore22
Thank you a lot for your help. Sub-menu works now and thank again !
About the disappearing footer, you said you don’t see the footer on the non-AMP mobile version of my site, it’s strange ! I’ve just seen it few minutes ago on my mobile, here the screen copy : https://bit.ly/2REDlh9
This section I circled, I do not see it on the AMP mobile version.
Don’t you see the same ?

Hello @mekasiat

Yes, I am unable to view it on mobile devices, here is a screen grab for the same

https://recordit.co/fGwXSIqHVS

I will recommend testing on different mobile devices or try turning off desktop browsing mode

I tested it on my smartphone by beginning the AMP version then turned it into the desktop version (on the mobile) – see the video here : https://bit.ly/3v6drkQ
On AMP version, like you I see nothing instead of the footer, it’s empty ! but when I turned it into the desktop version, the footer appears.
If my memory is good, I remember the footer was there before fixing the menu issue. I get the same issue (footer) on my two other websites as well.

Hello @mekasiat

The plugin and CSS I provided are AMP-specific and don’t execute or output on non-AMP pages.

Regarding your footer issues, I am not sure why it’s hidden it may be your theme or plugin adding those changes.

here is AMP-specific CSS which will make the footer visible only on AMP pages.

html[amp] footer#wi-footer {
    position: relative;
    z-index: 1;
}

Wow it’s awesome !!!! It works now !!!
Thank you a lot !!! It works perfect !!!! ??

Hi! I have the same problem with Avada https://www.climma.es/

Hello @mekasiat

Glad your issue is resolved. A plugin review would be highly appreciated!

Feel free to open a new support topic if you require any further assistance.

@vicenteveldi Please create a new support topic