[Support request] Navigation Search on AMP Site

[Divakara]

Hi

I want to implement Navigation Search on Full AMP site and tried already existing forum solution. The search function works fine, but the CSS styling not looks good on my site.

And in mobile screens, Search icon needs to be inside the menu. it should be displayed only after toggling.

Can you provide me the CSS code for both Desktop and mobile devices.

Thanks in Advance!

[David]

Hi there,

do you have an example site or screenshot of how you want it to look ?

And in mobile screens, Search icon needs to be inside the menu. it should be displayed only after toggling.

This is tricky to do, and i am not sure its possible, but if you can change the hook in step 3 here from:

generate_menu_bar_items to generate_after_primary_menu

I can see if its possible.

[Divakara]

Hi David,

Thanks for your response.

Changing the hook doesn’t helped me.So i switched it back to generate_menu_bar_items.

Can i get mobile and desktop navigation search similar to volume theme.

[David]

Can you switch the hook to: generate_after_primary_menu so i can then look to see how to position it inside the drop down navigation

[Divakara]

Hi David, Now changed back to generate_after_primary_menu. Please have a look..

[Ying]

Try this CSS:

form.search-form.i-amphtml-form {
    order: 3;
}

#mobile-header.toggled form.search-form {
    display: block;
}

#mobile-header:not(.toggled) form.search-form {
    display: none;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Author]

Posts