GP Site Library’s Menu and Search mobile features with AMP Conflict

This topic has 9 replies, 4 voices, and was last updated 5 years, 1 month ago by Tom.

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Posts
February 25, 2021 at 2:00 am #1671767

Baventhiran

Hi,

I have a problem with the mobile Menu & Search functions of the Tasty site import.

First, both became non-interactive features in mobile. I tried disabling all plugins (save the GP ones) and enabling one by one; found out that the official AMP plugin (By AMP Project Contributors) was the cause.

After disabling it, both features work in mobile. Then installed and activated GP’s AMP plugin alongside the official AMP plugin. In mobile, only the Menu feature appears and works but the search feature is no longer visible.

Tried another AMP plugin (By Ahmed Kaludi, Mohammed Kaludi), both features work in mobile, but unlike the previous AMP plugin, for the site pages to be AMP enabled, each page URL requires the /amp at the end of each.

Is there a way for both Menu and search features to work in mobile with the official AMP plugin (alongside GP’s AMP plugin)?

Site: https://life.skyferia.com

February 25, 2021 at 6:00 am #1672046
David
Staff
Customer Support
Hi there,

the navigation search requires JS which is why it doesn’t work on Mobile.
You can include a standard WP Search field in the nav using this PHP Snippet:
```
add_action( 'generate_menu_bar_items', function() {
    echo '<div class="hide-on-desktop">' . get_search_form() . '</div>';
} );
```
Adding PHP: https://docs.generatepress.com/article/adding-php/
February 25, 2021 at 5:44 pm #1673038

Baventhiran

Hi David,

Thanks for your guidance. Tried the snippet but the outcome is as before.

February 26, 2021 at 2:14 am #1673408

David
Staff
Customer Support

Can you add the code to the site so i can take a look at whats going on ?

February 26, 2021 at 3:55 pm #1674408

Baventhiran

Thanks. The code is at the site (placed using Code Snippets).

February 26, 2021 at 5:59 pm #1674464

Leo
Staff
Customer Support

That hook is only available in Flexbox version of the theme.

Can you go to Customizer > General and switch it from Float to Flexbox?

February 27, 2021 at 2:24 am #1674669

Baventhiran

Hi Leo,

Thanks for the Flexbox guide, however, this is the outcome:

I’m targeting for this with AMP (currently this happens with AMP plugins deactivated):

February 27, 2021 at 10:57 am #1675273

Tom
Lead Developer
Lead Developer

Hi there,

That sort of functionality (the icon only) requires javascript at this time, which isn’t supported in AMP.

In AMP, you need to show the search field only, or you’d need some custom development to develop a CSS-only toggle for the button to turn into a search field.

We’re working on AMP compatibility with our javascript features.

February 27, 2021 at 4:14 pm #1675495

Baventhiran

Hi Tom,

Ah, that explains it. I’ll stick with that for now then, thanks.

February 28, 2021 at 10:48 am #1676333

Tom
Lead Developer
Lead Developer

No problem!
Author

Posts