AMP plugin breaks my menu on mobile

Hi again,

The menu works perfectly well on homepage and other archive page. The only point is that once I close it (after open it) there is still a blue frame around the menu button, even though I have added the CSS code:
.mobile-menu-toggler.active:focus{
outline:0;
}

The MAJOR issue here is that every recipe pages are now messed up!

Can you help?

Once again, hi!

I have just noted that I cannot open subcategories in the menu

Hi @recetteitalienne,

Thanks for contacting us, my name is Fellyph and I’m here to help on your case. I’m analyzing the previous thread, and I will get back to you in a few minutes.

Hello

Thanks! ??

Hi @recetteitalienne,

Thanks for your patience, I could identify three items that you need help

1. outline
2. submenu is not open
3. Single pages CSS is not loading

3. I will start from the single page CSS, it is caused by excessive CSS:

AMP only allows 75?KB CSS on each page, so the AMP plugin adds optimizations for CSS which sometimes get exceeded by third-party plugins or themes. If you are not sure how to find exceeding CSS budget, follow the below steps:

1) Make sure you have enabled the AMP validation tool
Go-to: Users > Profile > check the checkbox for AMP Development tool > save

2) Visit AMP page exceeding CSS budget check Admin bar for AMP option locate submenu CSS budget and click on it (screenshot)

3) Locate the source of excessive CSS (screenshot)

4) If one of the plugins adds excessive CSS find an alternative plugin from AMP ecosystem

If Your theme is adding Excessive CSS Switch to Reader mode and choose Themes such as Astra or Neve as Reader Mode themes (screenshot)

You can learn more about Reader mode using our guide.

1. Related to the outline the code is not loading on AMP version:

.mobile-menu-toggler.active:focus {

}

Have you added this code at the WordPress customizer?

2. About the submenu are you using the mini plugin for mobile menu?

Hi, thanks for the reply, I will follow the steps you gave me and come back to you if it doesn’t help.

For the submenu, I am using this plugin Max Mega Menu

• This reply was modified 2 years, 10 months ago by recetteitalienne.

So I have checked for exceeding CSS budget, it turns out that my theme is adding Excessive CSS. So I have been looking for Astra or Neve theme in reader mode but can’t find them. I only have themes “2021”

Hi @recetteitalienne,

To make Astra or Neve theme available, you should install them and after installed they will be available for use on reader mode.

Okay thanks, how should I download these themes?
Are those themes compatible with recipes template?

Hi @recetteitalienne,

When I mean installation is downloading them but not activate as the main theme(only for reader mode). Those themes on reader mode will load the post content, if the recipe is inserted inside the post content(wp_content) it will be displayed normally. If the template uses a different data to display the recipes, it won’t be displayed by the reader theme.

An alternative is using a plugin to remove the unnecessary CSS, such as “Asset Cleanup”

Hi,

1) Make sure you have enabled the AMP validation tool
Go-to: Users > Profile > check the checkbox for AMP Development tool > save

2) Visit AMP page exceeding CSS budget check Admin bar for AMP option locate submenu CSS budget and click on it (screenshot)

=> I cannot find anymore the AMP option on the Admin bar, even thouth AMP plugin is activated and the checkbox AMP development tool checked.

Hi @recetteitalienne,

1) To check how to enable the developer tools you can check this article in our documentation.

2) To check the exceeding CSS, we also have a section in our documentation about it.

If you still need help, I can record a video showing how to check it.

Hi, just found the AMP option on the Admin bar. I have been able to locate the source of excessive CSS and reduce it.

So when I check my website on mobile:

The menu works partially on homepage and other archive pages : I cannot open submenu.
But on recipe pages, it doesn’t work at all.
Can you help me fix it?

Also you told me about a mini plugin for mobile menu, I couldn’t find it.

Also, I have noticed that on mobile, my Instagram feed in the footer isn’t displayed any more?

Hi @recetteitalienne,

I have checked the submenu you can include the css code to make it visible:

html[amp] .mobile-header-w .mobile-header-menu-w ul.sub-menu {
display:block;
padding-left:20px;
}

About the Instagram feed, the theme hides the sidebar at the mobile version in a non-AMP version as well, in this case, is not AMP related but theme related.

If you have any questions please let me know.