Search Box with input field and button

This is slightly modified code. Is it possible to make search box completely visible - input field with placeholder + search button (search icon as button text)?

function search_filter($query) {
  if ( !is_admin() && $query->is_main_query() ) {
    if ($query->is_search) {
      $query->set('post_type', 'product');
    }
  }
}

add_action('pre_get_posts','search_filter'); 

add_filter( 'generate_navigation_search_output', function($output) {
    $output = sprintf(
        '<form method="get" class="search-form navigation-search" action="%1$s">          
			<input type="search" placeholder="Search..." class="search-field" value="" name="s" title="%2$s" />			
        </form>',
        esc_url( home_url( '/' ) ),
        esc_attr_x( 'Search', 'label', 'generatepress' ) 
    ); 
     return $output;
} );

Hi there,

This is slightly modified code. Is it possible to make search box completely visible – input field with placeholder + search button (search icon as button text)?

It's definitely possible w/ a few tweaks on the code. But I can't picture how you want it to look.

Do you have any mockup image of how you want it to be laid out? Do you want to use any specific search icon?

Let us know.

I want it to be always visible. I will style the box, just need input field (with placeholder) and search button (search icon as button and when clicked it searches the term) always visible - not only visible on click. So, the most basic search form with the same functionality.

Omg man, lifetime package and i need to wait 7 hours only to be asked something like this. Sorry, but this is frustrating.

Hi there,

sorry if we have caused any frustration - we aim to answer all requests within 24hrs and sometimes we need to ask a few questions to fully understand the requirement.

The simplest solution would be to NOT use the Navigation Search.

Instead you can hook in the wp search form using a function like so:

add_action('generate_menu_bar_items', function() {
  get_search_form();
});

Or you could use a Hook Element to add the function call.

It will require some CSS to style - which we can help with if you require.

Thank you. I just need to clear out the search input field once the search has been completed.

Is this possible?

Solved it, never mind

Glad to hear you found the solution.