[Support request] search input form in header (instead of overlay)

[Jeroen]

Hi

Is there a way to replace the current search functionality (click on icon to show search form) with a search form already visible so a visitor can directly start searching?

See screenshots as is now on https://festen-leshop.nl/

(input field preferably visible between logo and home in the nav)

Jeroen

[David]

Hi there,

you can disable the Navigation search then create a new Hook Element:

https://docs.generatepress.com/article/hooks-element-overview/

Add this to the content to get the WP Search form:

<?php get_search_form(); ?>

Select the hook: generate_menu_bar_items
And check execute PHP.
Set the Display Rules to the Entire site.

Once its in place i can provide some CSS to position it and style it if you want.

[Jeroen]

Hi David

Thanks, I just created the hook. In order to do that, I had to select ‘flexbox’ in the general settings, so I need to look what further changes this caused… But pls go ahead and tell me about the css options 🙂

Jeroen

[Jeroen]

Hi David

I changed some css already. If it’s possible to change the location of the search form (instead of last one on the right), I would sure like to know.

Related question: if I search a term and press enter, ideally I would like to see the same layout as on other (woocommerce) pages – 4 products per row – but at the moment it renders some default page template. Or is this beyond the scope of the theme?

For example https://festen-leshop.nl/?s=storytiles

Jeroen

[Ying]

If it’s possible to change the location of the search form

Not sure where you want to move it to, but you could use this CSS to move the search bar in front of the shopping cart.

.menu-bar-items .search-form {
    order: -1;
}

For the 2nd question, it’s not related to this topic, could you please open a new topic? Thanks for your understanding!

[Author]

Posts