Make search box always visible in header or top menu bar

Give this a try:

1. Copy scripts.js to your child theme
2. Comment-out or remove the “Toggle header search” section at the top. This will disable the click event to show/hide the search box.
3. Add this to your child theme functions.php to replace the parent theme js file with yours:

function my_js_script(){
// Remove the parent theme default JavaScript
  wp_dequeue_script( 'scripts' );

// Add your own script
  wp_enqueue_script( 'scripts', get_stylesheet_directory_uri() . '/js/scripts.js', array( 'jquery' ),'', true );
}
add_action( 'wp_enqueue_scripts', 'my_js_script' );

4. Add this to your child theme css to display the search form:

.search-expand {
  display: block;
  }

Hi bdbrown, Thanks a lot!

That worked like a charm but the search box hides the logo in mobile mode. https://i.imgur.com/Rql7ZU8.png

Anyway to limit the implementation of this change only to desktop/tablet layout?

Can you post a link to your site so we can have a look?

Yes, you can check it here: https://test.webtrickz.com/

You could use the @media css type to hide it at a specific width. However, since the element has an inline style of “display:block”, you’d have to use “!important” which then means the search box won’t appear at all on the mobile device.

Ok, I’ll leave it then for now.

But how can I change the background color of search on hover and also is it possible to add “Search here” text next to search icon in top menu bar for better visibility?

Thanks

That’s really a different topic so I’d suggest you mark this one as resolved and open a new topic. Thanks.