- This topic has 18 replies, 4 voices, and was last updated 1 year, 11 months ago by Tom.
November 14, 2019 at 2:57 am #1062759Paul
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?
PaulNovember 14, 2019 at 4:16 am #1062818DavidStaffCustomer Support
Tom created this plugin to fix the mobile menu issues with AMP:November 14, 2019 at 5:34 am #1062880Paul
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.November 14, 2019 at 8:13 am #1063155Paul
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.
PaulNovember 14, 2019 at 6:23 pm #1063527TomLead DeveloperLead DeveloperNovember 15, 2019 at 12:33 am #1063645Paul
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.November 15, 2019 at 8:16 am #1064130TomLead DeveloperLead DeveloperNovember 16, 2019 at 5:43 am #1064737Paul
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!November 16, 2019 at 9:21 am #1064987TomLead DeveloperLead Developer
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.December 12, 2019 at 5:10 am #1102007Longinos
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.December 12, 2019 at 5:13 am #1102013DavidStaffCustomer SupportDecember 12, 2019 at 5:39 am #1102032Longinos
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.December 12, 2019 at 6:59 am #1102224DavidStaffCustomer SupportDecember 13, 2019 at 3:28 am #1103024Longinos
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.
- You must be logged in to reply to this topic.