Site logo

Archived topic

search input form in header (instead of overlay)

4 replies · Started by Jeroen on February 3, 2021

Viewing posts 1–5 of 5

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

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.

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

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

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!

This archived topic is closed to new replies.