[Support request] Sub-menu items not showing in mobile menu with Flexbox

[Paul]

Hi,

Sorry to have to raise another issue with you, but I noticed that sub menu items are not appearing in my main mobile menu when I am in Flexbox mode. If I switch to Floats, they reappear and work normally.

https://www.skymania.com/wp/

The main menu item expands to display the area where the sub-menu items should appear, and the SVG arrow icons also display, but no text to click on. The site is in full AMP mode.

I appreciate that this is probably the gods telling me that submenus on mobile are a bad idea . . .

Thank you.

Paul

[David]

Hi there,

looks like the AMP menu is messing with the themes CSS. Can you first try clearing any caches.
If still an issue try adding this CSS to fix that:

.main-navigation.toggled .main-nav ul ul {
    visibility: visible !important;
}

[Paul]

Thank you, David! That has worked for me. 🙂

There is one oddity. A missing icon symbol appears next to the close arrow when a submenu is expanded. I’m not sure why.

[Paul]

Ah! On my iPad I see that it is a stack, presumably representing a menu of items!

[Tom]

Hi there,

Your images don’t seem to be loading.

Can you confirm you’re using our AMP for GeneratePress plugin as well?

Let us know 🙂

[Paul]

Hi Tom,

Yes, I can confirm that I do have the AMP for GeneratePress plugin activated.

Paul

[Paul]

Just to report that I have sorted this by switching back from svg to font for icons. I use so few of them that there is really no impact on site speed!

Thanks again.

Paul

[Tom]

I’ll do some testing on this and will update the AMP plugin if needed.

Thanks! 🙂

[Author]

Posts