Archived topic
AMP Menu Overlay
6 replies · Started by William on July 22, 2021
I have two sites, with seemingly identical menus (but using different templates. I just looked at the two sites and attempted to make the mobile menus exactly the same. When viewing the amp version of Crunchopedia’s mobile menu, as the menu items appear they push down the rest of the content. This is the desired behavior.
When viewing Webhostconnect’s mobile amp menu, the menu items do not push down the rest of the content, rather they are superimposed against the content, making them very hard to read. Is there a way to fix this?
https://crunchopedia.com/?amp
https://webhostconnect.com/?amp
Bill
Hi there,
the difference is the webhostconnect has a merged header element. You would need to disable the merged header on mobile to get the push down effect.
Maybe I misunderstand where to make this change. When I tried to edit the Merge in Elements, I changed it to Desktop Only. That made the menu disappear in the mobile amp version. I looked in Appearance>Customize and did see anything :(
Been playing around more with this, I get what the template is doing with the merged header element. While It looks good to have the menu and logo superimposed (merged) against a background, this approach will not work with amp. So it seems like my alternative is to reformat the header and push the menu / logo into that space. I'd just like to know if that's all we can do at this point.
When I tried to edit the Merge in Elements, I changed it to Desktop Only. That made the menu disappear in the mobile amp version
That should have done the trick - any cache plugins that may of required clearing ?
Hi David - this issue in this particular case was white font on the menu against a white background. So changing the merge element does work, it would just require more design work to have the words show up.
The Mobile nav when its not Merged should respect the colors you set in the Customizer > Colors > Primary Navigation.
Which can be overridden in the Header Elements nav colors for when it is merged.
