[Resolved] No hamburger menu in AMP

[Paul]

I am trying to switch my site to more of an AMP-first mode, because of the speed benefits.The official AMP plugin and the GeneratePress AMP plugin are doing a pretty good job at handling the site, both in standard and transitional modes. However, I cannot get the primary menu to show in AMP mode on small devices, either as the standard hamburger or the slide-in version. The menu bar does display on desktops (above the breakpoint set). Please can you advise?

Many thanks,

Paul

[David]

Hi there,

Tom created this plugin to fix the mobile menu issues with AMP:

https://github.com/tomusborne/amp-for-generatepress

[Paul]

Thank you. I already have that plugin installed and activated, as I said.

However, I have gone into troubleshooting mode and discover that there is a plugin that prevents the mobile menu appearing when activated. Ironically, it is GP Premium! (v 1.8.3). I have Menu Plus active within the plugin.

An additional problem is that the submenu items are not available on the mobile menu in AMP mode when it does appear (with GP Premium deactivated) though they do show on the desktop menu bar in AMP mode.

[Paul]

I have partly solved this problem now. I gave the Mobile Menu an explicit name – Menu – and it now appears. It seems the name is not attributed by default as for standard web pages.

However, the submenus still do not show on the mobile menu. Or rather most of them don’t. If I click on the main menu item “Astro guide”, for example, that page opens, and then if I go back to click on the Menu again, it opens and shows the submenu items. It does not work though for a second level of submenu.

Paul

[Tom]

Hi there,

Very strange – what happens if you switch to font icons in Customize > General?

[Paul]

Thank you, Tom. Switching to font icons has done the trick. Is there a way to include the search icon in the mobile menu too? That only shows on non-AMP menus.

[Tom]

The navigation search functionality uses javascript, which isn’t supported in AMP currently.

[Paul]

Thank you, Tom. I see that we also lose the functionality of the “More” button and infinite scroll to see more posts. Small price to pay for the speed boost though!

[Tom]

Yea, that uses javascript as well, unfortunately. Thanks for mentioning that, though – we’ll make it so that option is turned off if AMP is activated.

[Longinos]

Hi
I think I´m facing same or similar issue.
When in amp, the menu show but not the images associates, I will say, not the 3 bar nor the inverted ^.
The menu works, if you click in the space the inverted ^, then the menu is spanded.

The svg stuff is in the html but don´t show.
I have opened a issue in github to attach images.

https://github.com/tomusborne/amp-for-generatepress/issues/2#issue-535731564

[Longinos]

Well, seems that after 48h no one have read this.
Maybe I need to open a new issue.

Clues about the issue:
In the amp plugin for generatpress, in the menus, some buttons are added to deploy the menu options, but these buttons don´t have any image associated, so the user don´t have any clue on where tap to deploy the menu options. That´s the issue.
The work to do, I think, is:

1.- In the amp plugin in buttons add the svg stuff. Maybe an amp-bind is needed to change icons from when the menu is not deployed vs. when it is deployed ( the three bar icon must change to x icon and the inverted ^ must change to the rigth ^)

But have a question: Why when the amp is viewed in desktopn screen, the menu work and when in mobil screen the svg don´t show unless the svg is in the button?

Hope this make sense.

[David]

Hi there,

apologies your previous reply was not picked up it is rare that something slips through the net, we did receive the github issue though – and we will review and respond asap.

[Longinos]

Hi David
I have edited the previous post cause I have observed that the amp page menu works when in desktop screen, but don´t show svg images when in mobil screen.

Don´t worry about don´t see the messages, I´m glad with the generatepress support team.
Sorry for not to propose a PR in github, but my developer skin is very bad.

[David]

Thanks for reporting the issue – we’ll take a look 🙂

[Longinos]

Hi
If I can, I will make some advices about this issue:

1.- take a look at amp mega menu , maybe these amp element solve menu issues.

2.- Looking in to this I see you use some svg for include some simbols, like the hamburger menu, the search or the arrow…. well, the hambuger menu may appear 1 or 2 times, the search simbol 1 time in each page, but arrow may appear several times, for this you can save some bits, yes not too much, but…
How? You can include once a svg element like this:

<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
        <symbol id="icon-arrow" viewBox="0 0 330 512" aria-hidden="true" role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em"> <path d="M305.913 197.085c0 2.266-1.133 4.815-2.833 6.514L171.087 335.593c-1.7 1.7-4.249 2.832-6.515 2.832s-4.815-1.133-6.515-2.832L26.064 203.599c-1.7-1.7-2.832-4.248-2.832-6.514s1.132-4.816 2.832-6.515l14.162-14.163c1.7-1.699 3.966-2.832 6.515-2.832 2.266 0 4.815 1.133 6.515 2.832l111.316 111.317 111.316-111.317c1.7-1.699 4.249-2.832 6.515-2.832s4.815 1.133 6.515 2.832l14.162 14.163c1.7 1.7 2.833 4.249 2.833 6.515z" fill-rule="nonzero"></path></symbol>
      </defs>
</svg>

and the when you use it:

<svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow"> </svg>

Maybe I have mistakes in the code, but the idea is don´t include each time you use the arrow all the svg stuff.

[Author]

Posts