how to insert search box in the header

2. I am using a slider of size 1270×500 px. since i am not using the preferred height of 1400px, some white space is left out at the bottom of the slider. How to remove the empty space b/w slider and services area?

Hi..

Please share your site URL.

Thanks.

https://www.dirtyblankets.com

Hi..

That white space is coming from Service Area, if you add services then there are no white space left.

And if you don’t want to add Service Area then go to Admin Dashboard >> Appearance >> Theme Options >> Theme General Options.

Now copy below code and paste into Custom CSS Editor.

.enigma_service {
display: none !important;
}

For search box, send me your header.php file code.

Save the changes.

Thanks.

Hi,

I don’t have a php code for header.
I have have included a header.php file you have suggested for adding a search form to nav bar (https://pastebin.com/c5n2fwND).

The code works. But, i want the search form to be present just beside the logo above the nav bar.
My site URL is https://www.dirtyblankets.com

Hello,
*Please ignore the above message*
I found header.php code for search form. I want the search form to be present just beside the logo above the nav bar.

<form role=”search” method=”get” class=”woocommerce-product-search” action=”https://www.dirtyblankets.com/”&gt;
<label class=”screen-reader-text” for=”woocommerce-product-search-field”>Search for:</label>
<input id=”woocommerce-product-search-field” class=”search-field” placeholder=”Search Products…” value=”” name=”s” title=”Search for:” type=”search”>
<input value=”Search” type=”submit”>
<input name=”post_type” value=”product” type=”hidden”>
</form>

Hi..

Please make child theme and create a header.php file in that directory.

Now copy code from LINK and paste into child theme’s header.php file.

Let’s know further assistance.

Save the changes.

Thanks.

Hi..
Thanks for quick response.
The code in the link helped in moving the search box on to the header.
I am using woo commerce plug in for adding products to my site.
Can you provide the code for header.php so that the search results display the products updated on woocommerce.

<form role=”search” method=”get” class=”woocommerce-product-search” action=”https://www.dirtyblankets.com/”&gt;
<label class=”screen-reader-text” for=”woocommerce-product-search-field”>Search for:</label>
<input id=”woocommerce-product-search-field” class=”search-field” placeholder=”Search Products…” value=”” name=”s” title=”Search for:” type=”search”>
<input value=”Search” type=”submit”>
<input name=”post_type” value=”product” type=”hidden”>
</form>

Hi..

Please replace this code

<?php get_search_form; ?>

with below code in your child theme’s header.php file.

<form role="search" method="get" class="woocommerce-product-search" action="https://www.dirtyblankets.com/">
<label class="screen-reader-text" for="woocommerce-product-search-field">Search for:</label>
<input id="woocommerce-product-search-field" class="search-field" placeholder="Search Products…" value="" name="s" title="Search for:" type="search">
<input value="Search" type="submit">
<input name="post_type" value="product" type="hidden">
</form>

Save the changes.

Thanks.

Hi,

1.search form is working correctly. But the place holder text is not getting displayed and the text that is being typed also is not getting displayed. Please resolve it.
https://www.dirtyblankets.com

2. I want the search form at the center of the header(logo)box (in both directions i.e. along width and depth as well). Please help..

Hi..

Please add below css into custom css editor.

.search-field{
    color:#000 !important;
}
.woocommerce-product-search {
    margin-top: 20px !important;
}

Save the changes.

Thanks.

Works perfect.
Thanks a ton!!

Most Welcome..

Thanks..

Hi, is this Search for Full Search (include Blog and Articles)?

Thanks.

Hi..

Yes, it shows results of all custom post type.

Thanks.